了解watch和computed
在Vue.js中，数据的响应依赖于它的响应式系统。Vue.js在内部对数据进行劫持，在数据变化时触发视图上的变化。其中，watch和computed都是对Vue.js响应式系统的扩展。
watch可以侦听数据的变化，并在数据变化时执行自定义的函数。通过使用watch，我们可以监视某个特定的数据对象，并在它的值发生变化时执行一些操作。这些操作可以是异步的，也可以是同步的。使用watch的格式如下：
watch: {
数据对象名称：{
deep: boolean,
handler:function(newVal, oldVal){
// 监听到数据发生变化后执行的操作
}
}
}
computed可以根据依赖的数据计算一个新值，并在数据变化时自动更新。Computed属性只有在它所依赖的数据发生变化时才会重新求值。Computed属性的好处是它们可以缓存它们的计算结果，只在必要时重新计算。使用computed的格式如下：
computed: {
计算属性名称: function () {
// 依赖的数据
return this.数据对象名称.计算属性名称;
}
}
使用watch检测数据
使用watch时，一旦侦听到数据的变化，就会触发指定的操作。在Vue.js中，我们可以使用$watch来创建观察者。$watch接收三个参数：要侦听的数据、要执行的函数、一个选项对象，其中选项对象可以包含一个deep选项，deep选项可以用来深度侦听对象的嵌套属性。下面的例子演示了如何在Vue中使用watch：
// 父组件中的数据
data() {
return {
count: 0
};
},
watch: {
// 监听count的变化
count(newVal, oldVal) {
console.log('count 变化了：', newVal, oldVal);
}
}
在上述示例中，我们定义了一个变量count并设置其默认值为0。随后，我们使用watch方法来监听count的变化。每当count的值变化时，watch函数就会被触发。
使用computed检测数据
Computed属性是根据依赖的数据动态计算而得出的结果。当依赖数据发生变化时，计算属性也会重新计算，因此，Computed属性的值具有响应性。下面的示例演示了如何在Vue.js中定义计算属性：
// 父组件中的数据
data() {
return {
firstName: '张',
lastName: '三'
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
在以上的示例中，我们定义了两个变量firstName和lastName，并通过计算属性fullName将它们连接起来。每当firstName或lastName发生变化时，计算属性fullName会被重新计算。
watch和computed的异同
watch和computed具有一些相似之处，例如它们都可以跟踪数据的变化，都能响应数据变化事件。然而，它们之间也存在一些不同。
watch与computed不同之处
1、依赖关系
watch能够侦听任何值的改变，甚至是异步的数据，而且watch可以侦听到嵌套数据的变化。但是，这会导致性能问题，因为watch需要侦听到所有的变化，无论是否有用。所以，如果您只是想在值发生变化时执行一个函数，那么watch是很好的选择。
computed只在依赖项（计算属性内使用到的变量）发生变化时重新计算。使用computed可以避免因计算“无用”数据而造成的性能问题，但这也使得computed无法侦听到异步数据的变化，因为它们不是响应式的（只有computed的依赖项是响应式的）。
2、功能
watch和computed的主要区别在于它们的用途不同。需要注意的是，计算属性和观察属性并不互换，但他们有时可以用于处理相同的问题。
3、使用场景
如果我们需要在数据变化时执行异步操作或复杂操作，那么watch可能是一个很好的选择。而如果我们希望根据数据变化的方式生成新的值，那么computed可能是更好的选择。
总结
使用computed和watch是Vue.js响应式系统的扩展，它们都用于侦听数据以及响应数据变化。Computed属性将新值根据一些计算规则生成，而watch允许我们在数据发生变化时执行异步或复杂操作。watch具有更高的灵活性，可以侦听非响应式变量的变化，而computed具有更高的性能，可以避免执行不必要的计算。