Vue.js 2.6.14数组对象属性变更未在视图UI中更新的问题

你的核心问题出在数据引用不一致和响应式依赖未建立：

1. 你更新的是topics数组中的原始对象，但组件渲染依赖的hierarchicalList如果是一次性生成的静态数组，且生成过程中创建了对象副本（比如用扩展运算符、Object.assign等），那么hierarchicalList里的对象和topics里的对象是两个独立的引用——更新原始对象的属性，不会同步到副本对象上，自然UI不会更新。
2. hierarchicalList存在data中，不会自动响应topics的变化，即使你修改了topics里的对象，hierarchicalList也不会重新生成。

1. 将hierarchicalList改为计算属性 #

把hierarchicalList从data移到computed中，让它依赖topics自动重新计算：

new Vue({
  el: '#app',
  data: {
    topics: [
      { id: 1, showAddChildFormVal: false },
      { id: 2, parentId: 1, showAddChildFormVal: false },
      { id: 3, parentId: 1, showAddChildFormVal: false }
    ]
  },
  // 用computed替代data中的hierarchicalList
  computed: {
    hierarchicalList() {
      const topicMap = {};
      const rootTopics = [];

      // 第一步：遍历原始topics，直接引用对象，添加响应式children属性
      this.topics.forEach(topic => {
        // 直接使用原始对象引用，避免创建副本
        topicMap[topic.id] = topic;
        // 如果原始对象没有children属性，用Vue.set添加响应式属性
        if (!topic.hasOwnProperty('children')) {
          Vue.set(topic, 'children', []);
        }
      });

      // 第二步：构建树形结构
      this.topics.forEach(topic => {
        if (topic.parentId) {
          topicMap[topic.parentId].children.push(topic);
        } else {
          rootTopics.push(topic);
        }
      });

      return rootTopics;
    }
  },
  methods: {
    toggleAddChildForm(topic) {
      // 直接修改传入的topic对象（和原始topics中的对象是同一个引用）
      topic.showAddChildFormVal = !topic.showAddChildFormVal;
      // 无需再用this.$set，因为showAddChildFormVal是初始化时就存在的响应式属性
    }
  }
});

2. 简化递归组件逻辑（可选） #

因为现在组件中拿到的topic就是原始topics的引用，直接修改即可，甚至可以把切换逻辑放在组件内部，不需要emit到父组件：

Vue.component('topic-list', {
  props: ['topics'],
  template: `
    <ul>
      <li v-for="topic in topics" :key="topic.id">
        <div>
          <button @click="topic.showAddChildFormVal = !topic.showAddChildFormVal">Toggle</button>
        </div>
        {{ topic.showAddChildFormVal }}
        <topic-list :topics="topic.children"></topic-list>
      </li>
    </ul>
  `
});

如果需要保持父组件统一管理状态，保留原有emit逻辑也没问题，现在父组件中直接修改emit过来的topic即可，不需要再查找原始对象。

关键要点总结 #

• 避免对象副本：生成树形结构时必须使用原始topics数组的对象引用，不能创建新对象，否则数据变更无法同步。
• 利用计算属性：计算属性会自动依赖topics的变化重新生成树形结构，确保UI拿到的始终是最新数据。
• 响应式属性初始化：如果需要给原始对象添加新属性（比如children），必须用Vue.set确保属性是响应式的。

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