1.作用:用于监听数据变化,从而针对特定的数据做出特定的操作
(1)方法格式的侦听器
缺点1:无法在进入页面时,自动触发(使用immediate选项解决这个问题)
缺点2:如果侦听的是一个对象,对象里面的属性发生变化,不会触发侦听器
(2)对象格式的侦听器
好处1:可以通过immediate(作用:控制侦听器是否自动触发)选项,让侦听器自动触发。
好处2:可以通过deep选项,让侦听器深度监听每个对象中的属性变化
2.定义:所有的侦听器,都应该定义在watch节点下
<script>
export default{
data:{
return {
username:''
}
},
watch:{
//侦听器本质是一个函数,要监听那个数据的变化,就把数据名作为方法名即可
//普通用法
//username(newVal,oldVal) {
//},
// 深度监听
// info:{
// handler是固定写法
// handler(newVal) {
// console.log(newVal)
// },
// // 开启深度监听,只要对象中任何一个属性变化了,都会触发监听器
// deep:true
// },
// 如果要侦听对象中某一个子属性的变化,则可以裹一层单引号
'info.username'(newVal) {
console.log(newVal)
}
}
}
</script>