在 Vue 中watch监听一个对象时，如何排除某些属性的监听

Vue 6月前 553

在 Vue 中使用 watch 时，你可能需要监听一个对象，但只关心对象中的某些属性，而不是对象的所有属性。这种情况下，你可以使用深度监听和计算属性，或者在 watch 中添加一些选项来排除某些属性的监听。

一、深度监听和计算属性

深度监听是 Vue.js 中的一项功能，它可以监听对象的属性变化，并且可以递归地观察对象内部的每个属性。你可以使用计算属性来过滤掉不需要监听的属性，从而只触发需要的操作。

下面是一个示例：

// HTML:
<div id="app">
  <span>{{obj.a}}</span>
  <button @click="update">update</button>
</div>

// JS:
new Vue({
  el: '#app',
  data: {
    obj: {a: 1, b: 2},
    c: 3
  },
  computed: {
    watchedObj() {
      return {a: this.obj.a};
    }
  },
  methods: {
    update() {
      this.obj.a++;
      this.obj.b++;
      this.c++;
    }
  },
  watch: {
    watchedObj: {
      handler(val, oldVal) {
        console.log('old:', oldVal);
        console.log('new:', val);
      },
      deep: true
    }
  }
});

在这个示例中，我们定义了一个对象 obj 和一个计算属性 watchedObj，计算属性只包含我们想要监听的属性。然后我们在 watch 中监听 watchedObj，设置 deep 选项为 true，这样只有 obj.a 发生变化时，watchedObj 才会被触发。

二、选项过滤

在 watch 中，你可以使用一个选项对象来设置一些选项，包括 immediate，deep，handler 等等。还有一个选项是 watch 过滤，使用这个选项可以排除某些属性的监听。

下面是一个示例：

// HTML:
<div id="app">
  <span>{{obj.a}}</span>
  <button @click="update">update</button>
</div>

// JS:
new Vue({
  el: '#app',
  data: {
    obj: {a: 1, b: 2},
    c: 3
  },
  methods: {
    update() {
      this.obj.a++;
      this.obj.b++;
      this.c++;
    }
  },
  watch: {
    obj: {
      handler(val, oldVal) {
        console.log('old:', oldVal);
        console.log('new:', val);
      },
      deep: true,
      // 这里是过滤选项
      watch(prop, val) {
        return prop === 'a';
      }
    }
  }
});