watch深度监听数组_实例详解vue.js浅度监听和深度监听及watch用法

第一个浅度监听：

{{a}}

{{b}}

var vm=new Vue({

el:"#app",

data:{

a:10,

b:15

}

});

vm.$watch("a",function(){

alert('a变化了');

this.b=100;

});

document.οnclick=function(){

vm.a=2

}

第二个深度监听

{{a|json}}

{{b}}

var vm = new Vue({

el: "#app",

data: {

a: { id: "1", title: "width" },

b: 15

}

});

vm.$watch("a", function() {

alert('a变化了');

this.b = 100;

}, { deep: true });

document.onclick = function() {

vm.a.id = "2";

}

ps：下面看下vue中watch用法

对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;

//使用官方vue-cli脚手架书写

//观察数据为字符串或数组

/当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数

export default {

data(){

return {

example0:"",

example1:"",

example2:{

inner0:1,

innner1:2

}

}

},

watch:{

example0(curVal,oldVal){

console.log(curVal,oldVal);

},

example1:'a'，//值可以为methods的方法名

example2:{

//注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象

handler(curVal,oldVal){

conosle.log(curVal,oldVal)

},

deep:true

}

},

methods:{

a(curVal,oldVal){

conosle.log(curVal,oldVal)

}

}

}