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");
　　　　　　　　}
　　　　　　}
    }