Vue3修改vue3-tree节点label后视图不更新，求替代Vue.set方案

问题原因 #

你直接修改onNodeClick返回的node对象属性不生效，大概率是因为这个node是组件内部拷贝后的普通对象，并非你声明的响应式数据源的代理实例，所以修改它无法触发Vue的响应式更新。Vue3中确实移除了Vue.set，转而依靠Proxy实现响应式，只要操作的是响应式对象的属性，就能自动触发更新。

可行解决办法 #

1. 确保树数据源是响应式的

首先确认你的树数据是用reactive或ref声明的响应式对象，比如：

import { reactive } from 'vue'

// 示例树数据
const treeData = reactive([
  {
    id: 1,
    label: '父节点',
    children: [
      { id: 2, label: '子节点1' },
      { id: 3, label: '子节点2' }
    ]
  }
])

2. 修改原始响应式数据源中的对应节点

在onNodeClick中，通过遍历原始的响应式树数据，找到与点击节点匹配的实例（建议用唯一id匹配，避免引用不一致问题），再修改其label属性：

const onNodeClick = (clickedNode) => {
  // 递归查找对应节点
  const findTargetNode = (data, targetId) => {
    for (const item of data) {
      if (item.id === targetId) {
        return item
      }
      if (item.children?.length) {
        const result = findTargetNode(item.children, targetId)
        if (result) return result
      }
    }
    return null
  }

  const targetNode = findTargetNode(treeData, clickedNode.id)
  if (targetNode) {
    targetNode.label = "Label got changed!!!"
  }
}

3. 利用组件的双向绑定特性

部分树组件支持通过v-model绑定数据源，这种情况下只要修改原始响应式数据，视图会自动同步更新，无需额外操作。

内容的提问来源于stack exchange，提问作者fandang