Vue 官网解释:
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。
watch 监听数据分为两种情况:
第一种:基本类型数据监听
比如:字符串,整数,Boolean,类型的数据
第二种:引用类型数据监听
比如:对象,和数组
基本类型数据监听实例
HTML
<div id="demo">{{ fullName }}</div>
JS
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
引用类型数据监听
props: {
secdown: {
type: Object,
default: () => ({})
}
},
watch: {
secdown: {
handler(val) {
this.changeChoose(val);
},
deep: true,
immediate: true
}
}
这里注意,因为是对象或者数据时候,vue不能进行到深层拷贝,所以需要加上 deep: true,如果还需要数据立即进行监听,则需要在加上 immediate: true。