Vue数据变化监听错误的常见原因与解决方案

export default {
  data() {
    return {
      message: 'Hello Vue!' // 响应式数据
    };
  },
  methods: {
    updateMessage() {
      this.newMessage = 'Hello World!'; // newMessage 未在 data 中定义，不会被监听
    }
  }
};

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('User data changed');
    }
    // 缺少 deep: true，无法监听对象内部属性变化
  }
};

this.items[1] = 'New Item'; // Vue 无法监听这种直接修改数组索引的方式

<!-- 父组件 -->
<template>
  <ChildComponent :parentData="data" />
</template>

<!-- 子组件 -->
export default {
  props: ['parentData'],
  watch: {
    parentData(newVal, oldVal) {
      console.log('parentData changed');
    }
  }
};

this.$set(this, 'newMessage', 'Hello World!');

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('User data changed');
    },
    deep: true
  },
  parentData: {
    handler(newVal, oldVal) {
      console.log('parentData changed');
    },
    immediate: true
  }
};

this.$set(this.items, 1, 'New Item');

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log(`Full name changed from ${oldVal} to ${newVal}`);
  }
};