0五、Vue.js---計算屬性

時間 2019-11-18

標籤 vue.js vue 計算屬性欄目 JavaScript 简体版

原文原文鏈接

計算屬性的關鍵字是 computed。javascript

官網：模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。因此，對於任何複雜邏輯，你都應當使用計算屬性。html

計算屬性使用緩存的方式對數據進行不太複雜的操做，完成數據過濾的功能。java

一、基礎例子

官網給的計算屬性的基礎例子：使用計算屬性將字符串倒序輸出。緩存

html 部分代碼：app

<div id="example">
  <p>原始數據： "{{ message }}"</p>
  <p>使用計算屬性(Computed)反轉 message: "{{ reversedMessage }}"</p>
</div>

js 部分代碼：this

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

從上段代碼，咱們能夠知道計算屬性的使用及調用方法。spa

二、計算屬性VS過濾器

計算屬性只在 依賴的數據發生變化時 執行運算過程，計算結果會被緩存在內存中，屢次調用時，若是依賴的數據未發生變化，不會再去進行運算過程的執行。設計

js代碼部分：code

window.onload = function(){
    new Vue({
        el: "#app",
        data: {
            num: 10,
            num2:10
        },
        // 過濾器
        filters: {
            myFilter:(data)=>{
                console.log("過濾器被調用");
                return data;
            }
        },
        // 計算屬性
        computed: {
            myCompute:function(){
                console.log("計算屬性被調用");
                return this.num;
            }
        }
    }); 
}

html代碼部分：htm

<body>
    <div id="app">
        num:<input type="text" v-model="num">
        <br/>
        num2:<input type="text" v-model="num2">
        <div> 過濾器：{{ num | myFilter}}</div>
        <div> 計算屬性：{{myCompute}}</div>
    </div>
</body>

結果以下圖所示：

由於num是計算屬性myCompute打依賴屬性，因此，num改變時會打印出計算屬性被調用。這是由於計算結果被放在緩存中。

而對於過濾器而言，無論是num仍是num2改變，都會打印出過濾器被調用。（執行方法的內部代碼）。

所以，通常計算屬性都要有一個依賴的數據，不然不會再去進行運算過程的執行。

三、計算屬性的設置方法

上面代碼中，都是直接獲取計算屬性結果。咱們能夠經過如下方法實現對計算屬性獲取參數並處理。

js部分代碼：

window.onload = function(){
    new Vue({
        el: "#app",
        data: {
            num: 1,
            result:1
        },
        
        // 計算屬性
        computed: {
            // 計算 x的x次方，2的二次方 2*2=4,3的三次方 3＊3*3=27...
            pow:{
                get:function(){
                    return this.num;
                },
                set:function(value){
                    // 經過計算屬性set方法將 num 的值改成文本框輸入的值
                    this.num=value;
                    // 計算x的x次方
                    this.result=Math.pow(value,value);
                }
            }
        }
    }); 
}

html部分代碼：

<body>
    <div id="app">
        <input type="text" v-model="pow">
        <div>計算屬性get方法得到num：{{pow}}</div>
        <div>經過set方法求x的x次方的到result：{{result}}</div>
    </div>
</body>

代碼運行結果：

到此，完畢。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。