深入理解Vue中的watch与computed：用法与对比

在Vue.js中，watch和computed都是用于观察和响应数据变化的手段。它们都能实现数据的实时更新，但使用方式和性能上有一些区别。本文将通过实例和图表，详细解释它们的用法和特点，帮助你更好地选择适合的观察方式。
一、watch
watch是Vue实例的一个选项，可以用来观察和响应Vue实例上的数据变化。当需要在数据变化时执行异步或开销较大的操作时，使用watch会比computed更加合适。
用法
在Vue实例中，可以通过添加一个watch属性来使用watch。watch属性是一个对象，其中包含一个或多个观察者。每个观察者都有一个回调函数，当对应的值变化时，该回调函数将被调用。

new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
watch: {
message: function(newVal, oldVal) {
console.log('Message changed from ' + oldVal + ' to ' + newVal);
}
}
})

在上面的例子中，当message的值发生变化时，watch中的回调函数将被执行，打印出新的和旧的值。
注意事项

1. watch回调函数将在下一个事件循环中异步触发，因此不能保证立即执行。如果需要立即获取新值，可以使用immediate选项。
2. watch适用于需要执行异步或开销较大的操作，但需要注意性能问题。过多的watch会导致性能下降。
3. watch不会缓存计算结果，每次数据变化时都会重新计算。如果需要缓存计算结果，可以使用computed。
   二、computed
   computed是Vue实例的一个选项，可以用来观察和响应Vue实例上的数据变化。与watch不同，computed会缓存它的值，只有在它的依赖发生改变时才会重新计算。这使得computed更加适合执行计算属性或方法。
   用法
   在Vue实例中，可以通过添加一个computed属性来使用computed。computed属性是一个对象，其中包含一个或多个计算属性。每个计算属性都有一个getter函数和一个setter函数（可选）。getter函数返回计算属性的值，而setter函数在更新计算属性时被调用。

   new Vue({
   el: '#app',
   data: {
   firstName: 'John',
   lastName: 'Doe'
   },
   computed: {
   fullName: {
   get: function() {
   return this.firstName + ' ' + this.lastName;
   },
   set: function(newValue) {
   var names = newValue.split(' ');
   this.firstName = names[0];
   this.lastName = names[1];
   }
   }
   }
   })

   在上面的例子中，fullName是一个计算属性，它返回firstName和lastName的组合。当fullName被读取时，get函数会被执行。当fullName被赋值时，set函数会被执行。注意set函数中使用了this关键字来更新firstName和lastName的值。
   注意事项
4. computed属性会缓存它们的值，只有在它们的依赖发生改变时才会重新计算。这可以提高性能，但需要注意避免不必要的计算或重复计算。