Vue.js computed和watch区别与应用场景详解 - 代码示例

computed是Vue实例的计算属性，它根据依赖的响应式数据进行计算，并且缓存结果，只有依赖的响应式数据发生变化时，才会重新计算。computed属性是基于它们的依赖进行缓存的，只有当依赖发生改变时，才会重新求值。\n\nwatch是Vue实例的观察者，它用于观察和响应Vue实例上的数据变动。当被观察的数据发生变化时，执行相应的回调函数。\n\n应用场景：\n1. computed适用于需要根据其他响应式数据进行计算得出结果的场景，例如计算商品总价、过滤和排序列表等。\njavascript\ncomputed: {\n totalPrice() {\n return this.products.reduce((total, product) => total + product.price, 0);\n }\n}\n\n\n2. watch适用于需要在数据变化时执行异步或开销较大的操作的场景，例如监听输入框中的关键字变化并发送网络请求进行搜索。\njavascript\nwatch: {\n keyword: {\n handler(newKeyword) {\n this.fetchSearchResults(newKeyword);\n },\n immediate: true\n }\n}\n\n\n3. computed还可以用于监听其它computed属性的变化，实现属性间的依赖关系。\njavascript\ncomputed: {\n discountPrice() {\n return this.originalPrice * this.discountRate;\n },\n finalPrice() {\n return this.discountPrice * (1 + this.taxRate);\n }\n}\n\n\n4. watch也可以用于监听多个数据的变化，并在其中任意一个数据变化时执行回调。\njavascript\nwatch: {\n 'user.name': function(newName) {\n this.updateDisplayName(newName);\n },\n 'user.age': function(newAge) {\n this.checkAgeEligibility(newAge);\n }\n}\n