watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作
例:
<body>
<div id="app">
<input type="text" v-model='username'>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: ''
},
//所有的侦听器,都应该被定义到watch节点下
watch: {
//侦听器本质上是一个函数,要监视哪个数据的变化
//就把数据名作为方法名即可
//形参里新值在前旧值在后
username(newVal, oldVal) {
console.log('监听到了unsername的变化' + '新值为' + newVal + '旧值为:' + oldVal)
}
}
})
</script>
</body>上文为方法格式的侦听器
无法在刚进页面的时候,自动触发
用对象格式的侦听器
可以通过immediate选项,让侦听器自动触发
//此处的username对象放在上文watch内
//定义对象格式的侦听器
username: {
//侦听器处理函数
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
//immediate选项的默认值是false
//immediate的作用是:控制侦听器是否自动触发一次
immediate: true
}深度侦听
通过deep选项,让侦听器深度监听对象中每个属性的变化
data: {
info: {
username: 'admin'
}
},
info: {
handler(newVal) {
console.log(newVal)
},
//开启深度监听,只要对象中任何一个属性变化了
//都会触发"对象的侦听器"
deep: true
}
//也可以不用deep这样写
'info.username'(newVal){
console.log(newVal)
}