Vue 监听器和计算属性到底有什么不同？

各自的适用场景

计算属性临时快照

官方文档对于计算属性提到了一个重要的点子——“临时快照”（可能就是前面说的计算属性缓存），每当源状态发生变化时，就会创建一个新的快照。

有时候创建快照是没有意义的，对于间隔时间很短的源数据修改，比如输入框输入时页面上的一些变化。输入第一个字符到第二个字符之间的间隔时间，字符有长有短，每一次都要创建“临时快照”，这样是没有意义的，反而可能增加开销。

计算属性除了可以用于复杂的模板取值计算（普通函数也可以做，也不是它的特性），还可以计算一次而在页面上多次使用（这是计算属性的“临时快照”的优势）。

监听器的副作用

因此，上面说到的情况就更加适合用监听器来做，监听器不创建“临时快照”。监听器更适用于官方文档说的场景：“我们需要在状态变化时执行一些‘副作用’：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态”。

监听器的副作用就是被监测的数据源发生变化才被触发，而不能被其他数据源发生变化而受到影响。具体往下看，就是我说的监听器单一性。

深入思考两者区别

计算属性由于在计算过程中依赖了很多响应式数据，一旦某一个响应式数据发生变化，那么整个计算属性都将重新计算。我就自以为计算属性有共享性。

虽然监听器也可以依赖于很多响应式数据，但是监听器只负责一个数据源，而被依赖的其他响应式数据一旦发生变化，都无法触发这个监听器，即监听器的单一性。

监听器：单一性

Talk is cheap. Show me the code.

定义两个输入框需要绑定的响应式数据 input、copyInput，监听器只负责监听 input，当监听器被触发时，新的值将赋值给 input，并且 input 也拼接给 copyInput（这里为了让两个产生联系而设计的无脑代码）：

let input = ref("");
let copyInput = ref("");

watch(input, (newVal, oldVal) => {
  input.value = newVal;
  copyInput.value += input.value;
  console.log("input value has changed.");
});

输入框绑定响应式数据，页面展示 copyInput：

<div class="demo1">
  <div>CopyInput Value: {{ copyInput }}</div>
  <div>
    <span>Input: </span>
    <input v-model="input" />
  </div>
  <div>
    <span>CopyInput: </span>
    <input v-model="copyInput" />
  </div>
</div>

第一个输入框内（即绑定 input 的输入框）输入三次，监听器被触发 3 次，当第二个输入框的数据发生变化时，控制台不打印，也就是说，监听器里面被依赖的数据没有因为改变而被触发。

计算属性：共享性

计算属性里面被依赖的其中一个响应式数据发生了变化，整个计算属性都将被重新计算。那么，计算属性是否和上面提到的监听器一样呢？

let input = ref("");
let copyInput = ref("");

const result = computed(() => {
  console.log("computed has changed.");
  return (copyInput.value += input.value);
});

<div class="demo2">
  <div>CopyInput Value Result: {{ result }}</div>
  <div>
    <span>Input: </span>
    <input v-model="input" />
  </div>
  <div>
    <span>CopyInput: </span>
    <input v-model="copyInput" />
  </div>
</div>

不管我改哪一个，只要是被计算属性依赖的数据源发生改变，这个计算属性都被触发，即共享性：

总结

（1）计算属性适合数据源发生变化间隔长，且页面使用它的次数多的情况；监听器适合数据源发生变化间隔短，或有异步操作，或有副作用的情况。

（2）如果不想其他响应式数据发生变化而导致被监测的源数据发生变化，那么就使用监听器。如果其他响应式数据发生变化，而被监测的源数据也一同发生变化，那么就使用计算属性。

声明

文章中所说的计算属性具有共享性和监听器具有单一性是为了方便理解他们之间的不同，博主擅自给的定义，可能存在不严谨的地方。

1. 计算属性具有共享性：指的是计算属性里面的被依赖的响应式数据只要有一个发生变化，整一个计算属性都重新计算，牵一发而动全身。
2. 监听器具有单一性：指的是监听器只负责它监听的那个数据源，如果发生变化，才会被触发，如果里面被依赖的其他数据源发生变化时，这个监听器不会被触发。

以上证明了我所阐述的观点，如果你有收货，请给我点个赞+收藏吧！