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