VueJS向数组push元素后DOM不更新的问题求助

我来帮你捋捋这个问题哈～你遇到的DOM不更新问题，核心是违反了Vue的单向数据流原则，还有对props的修改方式不对，咱们一步步解决：

问题根源 #

1. props不能直接修改：Vue里props是父向子单向绑定的，子组件直接修改props的值（不管是push还是Vue.set），虽然数组是引用类型可能会改到父组件的数据，但这种操作不符合规范，而且容易导致数据流向混乱，DOM更新也会出问题。
2. 静态字面量props的隐患：你父组件直接传了[{test: 'test'}]这种字面量数组，每次组件渲染都会生成新的数组引用，这也会干扰响应式更新。

正确解决方案 #

咱们按照Vue的规范来，让父组件维护数据，子组件通过事件通知父组件修改数据：

修改后的完整代码

<div id="app">
  <team-invite-list 
    :invited-users="invitedUsers" 
    @add-user="handleAddUser"
  ></team-invite-list>
</div>

<script>
Vue.component('team-invite-list', {
  template: '<div class="mt-2 flex"><a v-for="user in invitedUsers" :key="user.test" href="#">{{ user.test }}</a></div>',
  props: ['invitedUsers'],
  methods: {
    addInvitedUser(user) {
      // 触发自定义事件，把要添加的用户传给父组件
      this.$emit('add-user', user);
    }
  },
  mounted() {
    console.log(this.invitedUsers);
    // 通知父组件添加初始元素
    this.addInvitedUser({ test: '2' });
  }
});

var vm = new Vue({
  data() {
    return {
      // 父组件自己维护invitedUsers数据
      invitedUsers: [{ test: 'test' }]
    };
  },
  methods: {
    handleAddUser(user) {
      // 父组件这边修改数组，Vue会自动响应式更新DOM
      this.invitedUsers.push(user);
      // 如果是修改指定索引的元素才需要Vue.set，比如：
      // Vue.set(this.invitedUsers, index, newUser);
    }
  }
}).$mount('#app');
</script>

为什么这样能解决问题？ #

• 父组件掌握数据的控制权，符合单向数据流，数据变化可追踪。
• 子组件只负责展示和触发事件，不直接操作数据，避免了props修改带来的问题。
• push是Vue官方支持的数组响应式方法，父组件调用后，Vue会自动更新DOM，不需要额外用Vue.set（除非是直接修改数组索引的场景，比如this.invitedUsers[0] = ...）。

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