3. Vue侦听器
vue侦听器，用来监听数据的变化，来根据数据的变化执行某些操作
目录
一、什么是侦听器？
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);
}
}
})
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
15
0- 0
已为社区贡献2条内容
所有评论(0)