Vue.js子组件更新Props后无法即时变更？技术求助

这是因为Vue的响应式更新是异步批量处理的：当你通过this.$emit通知父组件更新数据后，父组件的someData变更并不会立刻同步到子组件的propDataFromParent，Vue会把这类数据更新操作放入异步队列，等当前同步代码执行完毕后再统一处理DOM更新和prop同步，所以你在$emit后立即console.log拿到的还是旧值。

解决方法1：使用$nextTick等待更新完成 #

修改子组件的updateData方法，用$nextTick延迟打印，确保prop已经同步新值：

methods: {
   updateData(data) {
      this.$emit('updateData', data);
      this.$nextTick(() => {
          console.log(this.propDataFromParent); // 此时能拿到更新后的值
      });
   }
}

解决方法2：监听prop的变化 #

如果需要在prop更新时做处理，更可靠的方式是通过watch监听prop的变化：

props: ['propDataFromParent'],
watch: {
  propDataFromParent(newVal) {
    console.log(newVal); // 每次prop更新时都会触发，拿到新值
  }
},
methods: {
   updateData(data) {
      this.$emit('updateData', data);
   }
}

补充说明 #

Vue的异步更新机制是为了避免频繁触发DOM重绘，提升性能。所有同步代码执行完成后，Vue才会一次性处理所有数据变更对应的DOM更新和组件prop同步，所以在同步代码中无法立即获取到更新后的prop值。

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