侦听data里的数据变化：
方法格式：
<script>
const vm=new Vue({
el:"#app",
data:{
username:"张三",
userList:[
{"id":1,"name":"张三"},
{"id":2,"name":"李四"}
],
info:{
username:'admin'
}
},
//所有侦听都定义到watch里
watch:{
//本质是个函数，要监视那个数据的变化就把数据名作为方法名
username(newVal,oldVal){
console.log(newVal,oldVal);
},
//如果要侦听的是对象的子属性的变化,则必须包裹一层单引号
'info.username'(newVal){
console.log(newVal)
}
}
})
</script>
缺点1:无法在刚进入页面的时候,自动触发
缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器
对象格式
<script>
const vm=new Vue({
el:"#app",
data:{
username:"张三",
userList:[
{"id":1,"name":"张三"},
{"id":2,"name":"李四"}
],
info:{
username:'admin'
}
},
//所有侦听都定义到watch里
watch:{
//定义对象格式的侦听器
username:{
handler(newVal,oldVal){
console.log(newVal,oldVal);
},
//默认选项是false，作用：控制侦听器刚进页面是否自动触发一次
immediate:true
},
userList:{
handler(newVal,oldVal){
console.log(newVal,oldVal);
},
//默认为false，开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器
deep:true
}
}
})
</script>
好处1:可以通过immediate选项,让侦听器自动触发
好处2:可以通过deep选项,让侦听器深度监听对象中每个属性的变变化