Vue學習筆記之計算屬性與偵聽器用法

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

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

本文實例講述了Vue計算屬性與偵聽器用法。分享給大家供大家參考，具體如下：

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

1、計算屬性

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

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

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

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

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

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

2、偵聽器watch

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

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

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

希望本文所述對大家vue.js程序設計有所幫助。

您可能感興趣的文章: