前言
当我们需要对某些数据的变化进行监视并执行某些操作时,可以使用 watch
侦听器
基本用法
方法格式(函数格式)
const vm = new Vue({
el: '#app',
data: {
username: '',
},
watch: {
// 如果 `username` 发生改变,这个函数就会运行
// 侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
// newValue 是'变化后的新值' oldValue 是'变化前的旧值'
username(newValue, oldValue) {
console.log(newValue, oldValue)
}
}
})
对象格式
const vm = new Vue({
el: '#app',
data: {
username: '',
},
watch: {
// 如果 `username` 发生改变,这个函数就会运行
username: {
// 侦听器的处理函数
handler(newValue, oldValue) {
console.log(newValue, oldValue)
},
}
}
})
immediate选项-立即触发
默认情况下,刚进入页面时是不会触发侦听器的,只有监听的数据发生变化才会触发,这里需要使用侦听器的 对象格式
并将 immediate 选项设为true
const vm = new Vue({
el: '#app',
data: {
username: '',
},
watch: {
username: {
// 侦听器的处理函数
handler(newValue, oldValue) {
console.log(newValue, oldValue)
},
// 控制侦听器是否自动触发一次,默认值false
immediate: true
}
}
})
deep选项-深度监听
默认情况下,监听的数据是个对象,对象的属性发生变化不会触发侦听器,这里需要使用侦听器的 对象格式
并将 deep 选项设为true
const vm = new Vue({
el: '#app',
data: {
info: {
username: ''
}
},
watch: {
info: {
// 侦听器的处理函数
handler(newValue, oldValue) {
console.log(newValue, oldValue)
},
// 控制侦听器开启深度监听,默认值false
// 开启深度监听后,info的username发生变化就会触发侦听器
deep: true
}
}
})
监听对象属性
如果只需要监听对象的单个属性,可以使用 ‘对象.属性’ 的方式来定义侦听器
const vm = new Vue({
el: '#app',
data: {
info: {
username: ''
}
},
watch: {
// 监听username的变化
'info.username'(newValue, oldValue) {
console.log(newValue, oldValue)
}
}
})