帮我优化下下面代码，我要更新status。监听数据变化，更新status. <template> <div :class="['node', status]"> <img :src="image.logo" alt="logo" @click="setClick"/> <span class="label">{{ label }}</span> <span class="status"> <img v-if="status === 'success'" :src="image.success" alt="success" /> <img v-if="status === 'failed'" :src="image.failed" alt="failed" /> <img v-if="status === 'running'" :src="image.running" alt="running" /> </span> </div> </template> <script setup> import { inject } from 'vue' import logoSet from '@/assets/img/set.png' import statusSuccess from '@/assets/img/success.png' import statusFailed from '@/assets/img/failed.png' import statusRunning from '@/assets/img/running.png' // 注入依赖 const getNode = inject('getNode'); const data = getNode()?.getData() || {} const { label, status = 'default' } = data //监听data变化，更新状态 getNode.on('change:data', ({ data }) => { const { status } = data status = status }) const image = { logo: logoSet, success: statusSuccess, failed: statusFailed, running: statusRunning } const setClick=()=>{ // alert('111') } </script>

代码优化建议

• 使用 Vue 3 的响应式 API：Vue 3 中推荐使用 ref 或 reactive 来创建响应式状态。6
• 简化模板中的条件渲染：避免在模板中使用多个 v-if 来渲染图片，可以使用计算属性来简化。4
• 优化事件监听：确保事件监听逻辑正确，并且使用 Vue 3 的 watch 函数来监听响应式数据的变化。210

优化后的代码示例

<template>
  <div :class="['node', statusIcon]">
    <img :src="image.logo" alt="logo" @click="setClick"/>
    <span class="label">{{ label }}</span>
    <img :src="image[statusIcon]" :alt="status">
  </div>
</template>

<script setup>
import { ref, watch, inject } from 'vue'
import { ref as refImg } from '@/assets/img'

// 定义响应式状态
const status = ref('default')
const label = ref('')

// 注入依赖
const getNode = inject('getNode');
const data = getNode()?.getData() || {}

// 初始化响应式状态
watch(() => data, (newData) => {
  label.value = newData.label
  status.value = newData.status
})

// 图片资源
const image = {
  logo: refImg('set.png'),
  success: refImg('success.png'),
  failed: refImg('failed.png'),
  running: refImg('running.png')
}

// 根据状态返回对应的图片名称
const statusIcon = computed(() => status.value)

const setClick = () => {
  // 点击事件处理逻辑
}
</script>

• 我使用了 ref 来创建响应式的状态变量 status 和 label。
• 使用 watch 来监听 data 对象的变化，并更新响应式状态。
• 通过计算属性 statusIcon 简化模板中的条件渲染，直接根据状态显示对应的图片。
• 假设 refImg 是一个辅助函数，用于引用图片资源，这里仅为示例，具体实现可能需要根据项目实际情况调整。6