亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue中watch對象內(nèi)屬性的方法

OldPanda / 3645人閱讀

摘要：通常寫法是，上述情況里中的屬性可以直接監(jiān)聽，但是如果需要監(jiān)聽的數(shù)據(jù)是對象內(nèi)的某一屬性值的變化，直接對象是檢測不到變化的，這是因為這個對象的指向并沒有發(fā)生改變。不過這樣會造成更多的性能開銷，尤其是對象里面屬性過多，結(jié)構(gòu)嵌套過深的時候。

vue提供了watch方法，用于監(jiān)聽實例內(nèi)data數(shù)據(jù)的變化。通常寫法是：

new Vue({
  data: {
    count: 10，
    blog:{
        title:"my-blog",
        categories:[]
    }
  },
  watch: {
    count: function (newval, oldVal) {
      console.log(`new: %s, old: %s`, newVal, oldVal);
    }
  }
})

上述情況里data中的count屬性可以直接監(jiān)聽，但是如果需要監(jiān)聽的數(shù)據(jù)是對象內(nèi)的某一屬性值的變化，直接watch對象blog是檢測不到變化的，這是因為blog這個對象的指向并沒有發(fā)生改變。有幾個解決方法

1.深度監(jiān)測 
new Vue({
  data: {
    count: 10，
    blog:{
        title:"my-blog",
        categories:[]
    }
  },
  watch: {
    blog:{
        handler(newVal,oldVal){
            console.log(`new: ${newVal}, old: ${oldVal}`);
        },
        deep:true
    }
  }
})

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

2.用字符串來表示對象的屬性調(diào)用 
new Vue({
  data: {
    count: 10，
    blog:{
        title:"my-blog",
        categories:[]
    }
  },
  watch: {
    "blog.categories"(newVal, oldVal) {
        console.log(`new:${newVal}, old:${oldVal}`);
    }, 
  }
})
3.使用computed計算屬性 
new Vue({
  data: {
    count: 10，
    blog:{
        title:"my-blog",
        categories:[]
    }
  },
  computed: {
    categories() {
      return this.blog.categories;
    }
  },
  watch: {
    categories(newVal, oldVal) {
      console.log(`new:${newVal}, old:${oldVal}`);
    }, 
  },
})
Reference

計算屬性和偵聽器 — Vue.js
vue watch對象內(nèi)的屬性監(jiān)聽
Vue使用watch監(jiān)聽一個對象中的屬性

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/101498.html

相關(guān)文章

  • vue 開發(fā)中遇到的問題匯總（踩坑指南）

    摘要：組件中使用定時器及銷毀問題如果我們在頁面中使用了一個定時器，當(dāng)從頁面跳轉(zhuǎn)到頁面時，如果不手動清除這個定時器，那么它仍舊會執(zhí)行，這不是我們所期望的。 公司年初開始從jquery轉(zhuǎn)型到vue開發(fā)，思想上從jquery的操作DOM到vue的操作數(shù)據(jù)，剛開始還不太習(xí)慣，但用了一段時間發(fā)現(xiàn)確實比較方便。在剛開始用vue的時候，也踩了一些坑，現(xiàn)在分享出來，供剛?cè)腴T上手開發(fā)vue的朋友參考，都是一些...

    wean 評論0 收藏0

  • 【Vue原理】Watch - 源碼版

    摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版今天繼續(xù)探索源碼，廢話不 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...

    Hancock_Xu 評論0 收藏0

  • 【Vue原理】Watch - 白話版

    摘要：而是在初始化時，在讀取了監(jiān)聽的數(shù)據(jù)的值之后，便立即調(diào)用一遍你設(shè)置的監(jiān)聽回調(diào)，然后傳入剛讀取的值設(shè)置了時，如何工作我們都知道有一個選項，是用來深度監(jiān)聽的。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下...

    hzx 評論0 收藏0

  • # vue.js 之 對vue.js基礎(chǔ)理解

    摘要：之對基礎(chǔ)理解構(gòu)造器是一個構(gòu)造函數(shù)，編程中稱之為構(gòu)造器每一個都是一個構(gòu)造函數(shù)的實例，這個過程叫做實例化構(gòu)造函數(shù)需要將其實例化后才會啟用構(gòu)造器要求實例化時需要傳入一個選項對象組件其實都是被擴(kuò)展的實例。 vue.js 之 對vue.js基礎(chǔ)理解 Vue構(gòu)造器 1 . Vue.js是一個構(gòu)造函數(shù)，編程中稱之為構(gòu)造器 2 . 每一個new Vue() 都是一個Vue構(gòu)造函數(shù)的實例，這個過程叫...

    Rainie 評論0 收藏0

  • 前端面試匯總VUE(二)

    摘要：采用了新舊的對比，獲取差異的，最后一次性的更新到真實上。對基本屬性進(jìn)行監(jiān)聽對對象進(jìn)行監(jiān)聽對對象某一個屬性監(jiān)聽監(jiān)聽自定義指令全局指令，第一個參數(shù)是指令名，第二個參數(shù)是一個對象，對象內(nèi)部有個的函數(shù)，函數(shù)里有這個參數(shù)，表示綁定了這個指令的元素。 11.vue 虛擬DOM的理解 Web界面由DOM樹(樹的意思是數(shù)據(jù)結(jié)構(gòu))來構(gòu)建，當(dāng)其中一部分發(fā)生變化時，其實就是對應(yīng)某個DOM節(jié)點發(fā)生了變化，??...

    Sanchi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<