Vue使用watch監(jiān)聽一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-09-21 07:53:37 來源：腳本之家閱讀：383 作者：葛小友欄目：web開發(fā)

問題描述

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

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

第一種解決方案：直接對(duì)象

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

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

第二種解決方案：deep

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

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

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

或者還可以這樣巧用計(jì)算屬性

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

Vue使用watch監(jiān)聽一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽