問題描述

Vue提供了一個watch方法可以讓使用者去監(jiān)聽某些data內(nèi)的數(shù)據(jù)變動，觸發(fā)相應的方法，比如

 queryData: {   name: '',   creator: '',   selectedStatus: '',   time: [], },

第一種解決方案：直接對象

現(xiàn)在我需要監(jiān)聽這個queryData，我可以這樣做：

watch: {   queryData: {     handler: function() {      //do something     },     deep: true   }}

第二種解決方案：deep

里面的deep設為了true，這樣的話，如果修改了這個queryData中的任何一個屬性，都會執(zhí)行handler這個方法。不過其實這樣開銷是蠻大的，尤其是對象里面結(jié)構(gòu)嵌套過深的時候。而且有時候我們就想關心這個對象中的某個屬性，比如name，這個時候可以這樣

watch: {   'queryData.name': {     handler: function() {      //do something     },   }}

第三種解決方案：（computed+watch）

或者還可以這樣巧用計算屬性

computed: {  getName: function() {    return this.queryData.name  }}watch: {   getName: {     handler: function() {      //do something     },   }}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。