vue对象监听如何实现

Vue 对象监听实现方法

Vue 提供了多种方式监听对象的变化，以下是常见的实现方法：

使用 watch 选项

在 Vue 实例或组件中，可以通过 watch 选项监听对象的变化。监听对象时，可以设置 deep 选项来深度监听对象内部属性的变化。

new Vue({
  data() {
    return {
      user: {
        name: 'John',
        age: 25
      }
    };
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('user changed', newVal);
      },
      deep: true // 深度监听
    }
  }
});

使用 $watch 方法

Vue 实例提供了 $watch 方法，可以在代码中动态添加监听器。

const vm = new Vue({
  data() {
    return {
      user: {
        name: 'John',
        age: 25
      }
    };
  }
});

vm.$watch(
  'user',
  function(newVal, oldVal) {
    console.log('user changed', newVal);
  },
  { deep: true }
);

使用计算属性

如果需要监听对象的某个特定属性，可以结合计算属性实现。

new Vue({
  data() {
    return {
      user: {
        name: 'John',
        age: 25
      }
    };
  },
  computed: {
    userName() {
      return this.user.name;
    }
  },
  watch: {
    userName(newVal) {
      console.log('user name changed', newVal);
    }
  }
});

使用 Vue.set 或 this.$set

对于动态添加的对象属性，需要使用 Vue.set 或 this.$set 来确保属性是响应式的。

new Vue({
  data() {
    return {
      user: {
        name: 'John'
      }
    };
  },
  mounted() {
    this.$set(this.user, 'age', 25); // 添加响应式属性
  }
});

使用 Vue.observable

在 Vue 2.6+ 中，可以使用 Vue.observable 创建响应式对象，适用于非组件上下文的场景。

const state = Vue.observable({
  user: {
    name: 'John',
    age: 25
  }
});

new Vue({
  data() {
    return {
      state
    };
  },
  watch: {
    'state.user': {
      handler(newVal) {
        console.log('user changed', newVal);
      },
      deep: true
    }
  }
});

注意事项

• 监听对象时，deep 选项会增加性能开销，应谨慎使用。
• 直接修改对象属性（如 this.user.name = 'Alice'）会触发监听，但直接替换整个对象（如 this.user = { name: 'Alice' }）也会触发监听。
• 对于数组的变化，Vue 已经封装了变异方法（如 push、pop 等），可以直接使用。