Vue學(xué)習(xí)筆記之計(jì)算屬性與偵聽(tīng)器用法

更新時(shí)間：2019年12月07日 11:52:44 作者：theVicTory

這篇文章主要介紹了Vue學(xué)習(xí)筆記之計(jì)算屬性與偵聽(tīng)器用法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js計(jì)算屬性與偵聽(tīng)器基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了Vue計(jì)算屬性與偵聽(tīng)器用法。分享給大家供大家參考，具體如下：

vue之所以加載速度非常塊，是因?yàn)樵跀?shù)據(jù)改變時(shí)，它并不是將所有組件都刷新，而是在重用代碼的基礎(chǔ)上對(duì)發(fā)生改變的地方進(jìn)行渲染。同時(shí)，還得益于計(jì)算屬性的使用：

1、計(jì)算屬性

像綁定普通屬性一樣在模板中綁定計(jì)算屬性。例如reverseName屬性依賴(lài)于firstName和lastName，當(dāng)firstName或lastName發(fā)生改變時(shí)，依賴(lài)于它的 reverseName 也會(huì)更新。

利用函數(shù)方法也可以實(shí)現(xiàn)類(lèi)似的效果，不同的是計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的。只有在它的相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要 firstName 還沒(méi)有發(fā)生改變，再次訪問(wèn) reversedName 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。相比之下，每當(dāng)觸發(fā)重新渲染時(shí)，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù).

為什么需要緩存？假設(shè)我們有一個(gè)性能開(kāi)銷(xiāo)比較大的的計(jì)算屬性 A，它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性 B 依賴(lài)于 A 。如果使用函數(shù)，每獲得一次B就要調(diào)用一次函數(shù)進(jìn)行計(jì)算，造成很大開(kāi)銷(xiāo)！

計(jì)算屬性默認(rèn)為get方法，也可以設(shè)定set方法，接收傳入處理數(shù)據(jù)。例如傳入originalName，set方法對(duì)其進(jìn)行拆解并復(fù)制給firstName與lastName，并引起firstName與lastName改變，調(diào)用get()方法。

<div id="app">
    <p>{{originalName}}</p>
    <p>{{reverseName}}</p>
    <button @click="deal()">反轉(zhuǎn)名字</button>
</div>

let vue=new Vue({
    el:'#app',
    data:{
      firstName:'',
      lastName:'',
      originalName:"super tory"
    },
    methods:{
      deal(){
        this.reverseName=this.originalName;
      }
    },
    computed:{            //計(jì)算屬性鉤子
      reverseName:{
        set(string){  //通過(guò)set方法對(duì)傳入?yún)?shù)this.originalName進(jìn)行操作
          let name=string.split(' ');
          this.firstName=name[1];
          this.lastName=name[0];
        },
        get(){      //通過(guò)get方法返回值
          return this.firstName+' '+this.lastName;
        }
      }
    }
});

2、偵聽(tīng)器watch

在Vue中提供一個(gè)鉤子，偵聽(tīng)data中的某個(gè)變量是否改變，如果改變則執(zhí)行響應(yīng)函數(shù)。

<div id="app2">
  <input v-model="listen">
</div>

let vue2=new Vue({
  el:'#app2',
  data:{
    listen:''
  },
  watch:{      //定義偵聽(tīng)器鉤子
    listen:function () {  //定義函數(shù)偵聽(tīng)listen的變化
      console.log("input內(nèi)容發(fā)生改變");
    }
  }
});

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: