目录
一、什么是侦听器?
Vue侦听器是提供给开发者可以用来监测某些数据的变化,从而针对这些数据的变化进行某些操作。
但是要注意:侦听器本质上是一个函数,如果要监听哪一个数据的变化,就把那个数据作为函数名
二、Vue侦听器的基本语法?
Vue侦听器提供了两种语法格式。一种是方法格式的写法,另一种是对象格式的写法。下面我们分别来看:
1. 方法格式的侦听器
var vm = new Vue({
el: "#app",
data: {
username: ''
},
// 所有的侦听器,都定义在watch节点下
// 侦听器本质上是一个函数,要监视哪一个数据,就把哪一个数据作为函数名
watch: {
username(newval, oldval) {
// newval表示:变化后的新值;oldval表示:变化前的旧值
console.log(newval, oldval);
}
}
})
方法格式的监听器有两个缺点:
1)首次进入浏览器的时候,无法立即触发一次侦听器
2)如果侦听的是一个对象,对象里面的数据发生了变化,并不会出发侦听器
2. 对象格式的侦听器
watch: {
// 优点:可以通过 immediate 控制侦听器自动触发一次
username: {
handler(newval, oldval) {
console.log(newval, oldval);
},
// 可以控制侦听器自动触发一次 ,默认为false
immediate: true
}
对象格式的侦听器有两个优点:
1)可以通过immediate属性,控制侦听器自动触发一次(默认是false)
2)可以 通过deep属性,控制侦听器深度监听到对象中每一个属性的变化
三、Vue侦听器的深度监听
var vm = new Vue({
el: "#app",
data: {
info: {
username: 'liupeng'
}
},
// 所有的侦听器,都定义在watch节点下
// 侦听器本质上是一个函数,要监视哪一个数据,就把哪一个数据作为函数名
watch: {
// info: {
// handler(newval) {
// console.log(newval);
// },
// // 开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器
// deep: true
// }
// 如果想要侦听对象里某一个子属性的变化,可以通过''单引号进行包裹
'info.username' (newval) {
console.log(newval);
}
}
})