@[TOC]
什么是watch？
watch用于监视数据的变化并在数据发生变化时执行特定的函数。它允许在数据变化时执行异步操作、验证数据的有效性、处理副作用等。
基本用法
在组件的选项中使用watch来监视特定的数据属性。
<template>
<div>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
watch: {
count(newValue, oldValue) {
console.log(`Count changed from ${oldValue} to ${newValue}`);
},
},
};
</script>在上面的示例中，我们有一个名为count的数据属性，然后使用watch选项来监视它。每当count的值发生变化时，watch中的函数将被调用，传递新值和旧值作为参数。
高级用法
除了基本用法外，watch还支持一些高级用法，例如监听嵌套对象、监听多个数据属性等。
监听嵌套对象
要监听嵌套对象中的属性，可以使用点号来访问它们。例如：
watch: {
'nestedObject.property'(newValue, oldValue) {
// 处理属性变化
},
},监听多个数据属性
监听多个数据属性，只需在watch选项中添加多个属性即可：
watch: {
prop1(newValue, oldValue) {
// 处理prop1的变化
},
prop2(newValue, oldValue) {
// 处理prop2的变化
},
},示例
假设有一个购物车应用，希望在购物车中添加商品时更新总价格。
<template>
<div>
<h1>购物车</h1>
<ul>
<li v-for="product in cart" :key="product.id">
{{ product.name }} - ${{ product.price }}
</li>
</ul>
<p>总价格: ${{ totalPrice }}</p>
</div>
</template>
<script>
export default {
data() {
return {
cart: [],
totalPrice: 0,
};
},
watch: {
cart: {
handler(newCart) {
this.totalPrice = newCart.reduce((total, product) => total + product.price, 0);
},
deep: true, // 监听嵌套对象
},
},
methods: {
addToCart(product) {
this.cart.push(product);
},
},
};
</script>使用watch来监听cart数组的变化。每当购物车中的商品列表发生变化时，watch中的处理函数将重新计算totalPrice，以反映最新的总价格。
总结
watch用于监听数据的变化并执行相应的操作。它可以用于处理各种情况，从简单的数据监视到复杂的异步操作。
