watch监听方法每次只能监听一个变量,单纯的使用watch是无法监听多个变量的,但是我们通过computed计算属性返回一个对象,然后使用watch监听这个计算属性的方法,只要值改变就会触发watch。
<template>
<div class="demo">
<a-button
type="primary"
@click="
() => {
this.isLace = !this.isLace
}
"
>
{{ isOnchange }}
</a-button>
</div>
</template>
<script>
export default {
name: 'demo',
data() {
return {
isLace: false,
loading: false,
}
},
computed: {
isOnchange({ isLace, loading }) {
//等同于 const { isLace , loading }=this
return { isLace, loading }
},
},
watch: {
//只要有一个值改变都会触发监听
isOnchange: function (o, n) {
// o改变后的值
// �n改变前的值
console.log(o, n)
},
},
}
</script>
总结:watch监听多个变量也就是利用计算属性computed把多个变量通过对象的形式返回,然后watch去监听computed计算属性,只要值改变了就先触发computed属性计算,在触发watch监听