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

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

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

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

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

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

下面我們改變一下需求：基礎(chǔ)規(guī)則不變，但是因?yàn)楹笈_(tái)數(shù)據(jù)庫(kù)的更改（畫個(gè)圈圈咀咒他）我們需要提交一個(gè)這樣的數(shù)據(jù)結(jié)構(gòu)

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

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

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

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

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

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

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

本文題目：vue2.0如何監(jiān)聽屬性的使用-創(chuàng)新互聯(lián)
本文來(lái)源：http://weahome.cn/article/hjhhd.html