new Vue({
el:"#app",
data:function (){
return {
msg:'你好',
obj:{
a:0,
b:0
}
}
},
/* 因为vue不是操作dom了，视图的变化是根据数据来的 */
/* 对数据进行实时监控的方法 监听器 */
watch:{
/* handler是数据msg 发生变化的时候触发的方法 */
msg:{
immediate:true,
handler:function(newVal,oldVal){
console.log('新值:'+newVal);
console.log('旧值:'+oldVal);
}
}
/* 对象里面的key 最传统的方式其实就是要加引号 */
'obj.a':{
immediate:true,
handler:function(newV,oldV){
console.log('a',newV,oldV);
}
},
'obj.b':{
immediate:true,
handler:function(newV,oldV){
console.log('b',newV,oldV);
}
},
obj:{
immediate:true,
handler:function(newV,oldV){
/* newV.a会报错使用 newV是一个变量 */
console.log('obj',newV['a'],oldV['b']); },
/* 深度监听对象里面的属性值 */
/* 深度监听 对象里面的值每次发生变化都会触发handler方法 */
/* 因为对象是引用数据类型，所以
每次值发生变化，对应的内存地址并没有发生变化，所以newV
和oldV都是同一个 */
deep:true
}
},
methods:{
add(){
this.msg = 'hello'
this.$set(this.obj,'c','123')
this.$delete(this.obj,'a')
}
}
})
