vue watch对象数据内数据的变化

需要根据 数据的变化而执行某些操作，且该数据是 对象内部的数据。

方法一

直接用 watch 观察该对象数据，需要加上deep，否则观察不到对象内部数据变化。然后比较需要观察的内部数据的变化。

 export default { 　　　　　　data(){ 　　　　　　　　return { 　　　　　　　　　　example:{ 　　　　　　　　　　　　inner0:1, 　　　　　　　　　　　　innner1:2 　　　　　　　　　　} 　　　　　　　　} 　　　　　　}, 　　　　　　watch:{ 　　　　　　　　example:{ 　　　　　　　　　//注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象 　　　　　　　　　　handler(curVal,oldVal){ 　　　　　　　　　　　　conosle.log(curVal,oldVal) 　　　　　　　　　　　　if(curVal.inner0 != oldVal.inner0){ 　　　　　　　　　　　　doSomething(); 　　　　　　　　　　　　} 　　　　　　　　　　}, 　　　　　　　　　　deep:true 　　　　　　　　} 　　　　　　}, 　　　　　　methods:{ 　　　　　　　　doSomething(){ 　　　　　　　　　　conosle.log("doSomething"); 　　　　　　　　} 　　　　　　} }

方法二（推荐）

灵活利用vue的计算属性。

export default { 　　　　　　data(){ 　　　　　　　　return { 　　　　　　　　　　example:{ 　　　　　　　　　　　　inner0:1, 　　　　　　　　　　　　innner1:2 　　　　　　　　　　} 　　　　　　　　} 　　　　　　}, 　　　　　　computed:{ 　　　　　　example_inner0(){ 　　　　　　return this.example.inner0; 　　　　　　} 　　　　　　}, 　　　　　　watch:{ 　　　　　　//直接观察计算属性 　　　　　　　　example_inner0:function(curVal,oldVal){ 　　　　　　　　doSomething(); 　　　　　　　　} 　　　　　　}, 　　　　　　methods:{ 　　　　　　　　doSomething(){ 　　　　　　　　　　conosle.log("doSomething"); 　　　　　　　　} 　　　　　　} }