Vue.js 是一款流行的前端框架，它可以通过数据绑定实现数据与视图的同步更新。Vue.js 中的 computed 和 watch 是两种重要的数据监听方式，本文将详细解释它们的原理、用法以及应用案例。
computed
computed 是一种计算属性，它会根据其依赖的属性进行计算，并返回一个新的值。computed 的用法如下：
new Vue({
computed: {
// 返回 fullName，它依赖于 firstName 和 lastName
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})在上面的示例中，fullName 的值是通过计算得到的，它依赖于 firstName 和 lastName 两个属性。computed 在以下情况下会被调用：
- 当计算属性第一次被访问时
- 当计算属性所依赖的属性发生改变时
computed 在处理简单的计算时非常方便，它可以将重复的代码封装成一个函数，使得代码更加简洁易读。同时，computed 的数据是可以缓存的，当 computed 所依赖的属性没有发生改变时，计算结果会被缓存起来，这样可以提高应用的性能。
watch
watch 是一种监听属性的方式，它会根据其所监听的属性发生改变时执行相应的操作。watch 的用法如下：
new Vue({
watch: {
// 当 firstName 改变时，执行该方法
firstName: function (newVal, oldVal) {
console.log('firstName changed from', oldVal, 'to', newVal)
}
}
})在上面的示例中，当 firstName 改变时，会调用一个函数并打印信息。watch 也可以监听一个对象中的属性，甚至可以监听一个数组的变化。
使用 watch 的场景包括：
- 监听某个数据的变化，然后执行一些操作；
- 处理一些异步操作，例如通过 AJAX 获取数据，然后更新视图；
- 监听数组变化，然后对数组进行操作。
需要注意的是，watch 不适合处理复杂的计算，如果需要进行计算，应该使用 computed。
应用案例
下面是一个应用案例，它演示了如何使用 computed 和 watch 对数据进行处理：
// javascriptcn.com 代码示例
<div id="app">
<label>价格: </label>
<input v-model="price">
<br>
<label>税率: </label>
<input v-model="taxRate">
<br>
<p>总价: {{totalPrice}}</p>
</div>// javascriptcn.com 代码示例
new Vue({
el: '#app',
data: {
price: '',
taxRate: ''
},
computed: {
totalPrice: function () {
return (parseFloat(this.price) * (parseFloat(this.taxRate)/100 + 1)).toFixed(2);
}
},
watch: {
price: function (newVal, oldVal) {
console.log('price changed from', oldVal, 'to', newVal);
},
taxRate: function (newVal, oldVal) {
console.log('taxRate changed from', oldVal, 'to', newVal);
}
}
})在上面的应用案例中，用户可以输入价格和税率，然后计算出总价。其中，computed 用来计算总价，watch 用来监听 price 和 taxRate 的变化。当 price 或 taxRate 发生变化时，Vue.js 会自动重新计算 totalPrice 并更新视图。同时，watch 回调函数中打印出了价格和税率的变化信息。
总结
本文详细介绍了 Vue.js 中的 computed 和 watch 两种数据监听方式。computed 可以用来处理简单的计算，watch 可以用来监听属性的变化。通过应用案例介绍了它们的用法和应用场景，并给出了示例代码。在实际开发中，应根据具体需求选择合适的数据监听方式，以优化应用性能并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652b5fc87d4982a6ebd5083a