99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這篇文章給大家分享的是有關(guān)vue2.0如何監(jiān)聽屬性的使用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站是專業(yè)的噶爾網(wǎng)站建設(shè)公司，噶爾接單;提供做網(wǎng)站、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行噶爾網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

1.基礎(chǔ)版監(jiān)聽：

場景如下：輸入框輸入你的年齡，如果年齡在0-15歲提示信息：你還是個小孩，如果年齡在 15-25歲，提示信息：你已經(jīng)是個少年，如果年齡在25歲以上，提示信息：你已經(jīng)長大了。根據(jù)需求配合監(jiān)聽屬性我們得到下面的代碼：

這里需要特別說明一下的是：堅挺屬性方法中的兩個參數(shù)分別代表的含義：第一個val是當(dāng)面正在監(jiān)聽的屬性的值，oldval是屬性改變之前的值，由于這是形參的原因，參數(shù)的名字可以自己定義，但是但是參數(shù)所代表的含義是不會變化的。

2.進階版監(jiān)聽：

下面我們改變一下需求：基礎(chǔ)規(guī)則不變，但是因為后臺數(shù)據(jù)庫的更改（畫個圈圈咀咒他）我們需要提交一個這樣的數(shù)據(jù)結(jié)構(gòu)

 data() {
  return {
   info: {
    age: ""
   },
   infoMsg: ""
  };
 },

由于我們監(jiān)聽的是對象info中的屬性age值的變化，所以我們需要使用到的是深度監(jiān)聽，具體代碼如下：

在這里需要注意的有兩點：1，這里的function不能使用箭頭函數(shù)替代，如果使用箭頭函數(shù)的話，this的指向會是全局。2，你會注意到這里多加入一個屬性是deep，它的含義表示是否開啟深度監(jiān)聽，如果開啟值為true，反之為false。

3.最高級監(jiān)聽：

針對第二個案例不知道你有沒有發(fā)現(xiàn)一個問題：我們監(jiān)聽的是一個對象里面某個屬性的變化，但是如果當(dāng)這個對象里面有很多個值的時候，雖然也可以使用第二種方法進行監(jiān)聽，但是這將會是對資源的一種極大的浪費，身為一個嚴謹?shù)某绦騿T（微笑臉），絕對不能允許這樣的事情發(fā)生，所以我們可以結(jié)合computed（計算屬性）對上面的代碼進行優(yōu)化：

通過上面的我們看出，這次我們監(jiān)聽的是計算屬性ageval，而計算屬性返回的則是info對象中age的值，與第二次的代碼進行比較我們可以發(fā)現(xiàn)兩次代碼中監(jiān)聽的一個是對象info，一個是info對象中age的值，性能大大增強，這就是我們期待的結(jié)果了。

感謝各位的閱讀！關(guān)于“vue2.0如何監(jiān)聽屬性的使用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站名稱：vue2.0如何監(jiān)聽屬性的使用-創(chuàng)新互聯(lián)
URL分享：http://www.ef60e0e.cn/article/hjhhd.html