vue計算屬性詳解——小白速會

時間 2019-11-18

標籤 vue 計算屬性詳解简体版

原文原文鏈接

1、什麼是計算屬性數組

模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。例如：緩存

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

這裏的表達式包含3個操做，並非很清晰，因此遇到複雜邏輯時應該使用Vue特帶的計算屬性computed來進行處理。app

2、計算屬性的用法函數

在一個計算屬性裏能夠完成各類複雜的邏輯，包括運算、函數調用等，只要最終返回一個結果就能夠。性能

咱們把上面的例子用計算屬性的方式重寫一下this

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//咱們把複雜處理放在了計算屬性裏面了
</div>

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

結果：spa

Original message: "Hello"設計

Computed reversed message: "olleH"code

除了上例簡單的用法，計算屬性還能夠依賴多個Vue 實例的數據，只要其中任一數據變化，計算屬性就會從新執行，視圖也會更新。對象

<body>
    <div id="app">
        <button @click="add()">補充貨物1</button>
        <div>總價爲：{{price}}</div>
    </div>
</body>

var app = new Vue({        
       el: '#app', 
   data: {
       package1: {
           count: 5,
           price: 5
       },
       package2: {
           count: 10,
           price: 10
       }
    },
    computed: {
     price: function(){
         return this.package1.count*this.package1.price+this.package2.count*this.package2.price　　//總價隨着貨物或價格的改變會從新計算
     }
    },
    methods: {   //對象的方法
        add: function(){
            this.package1.count++
        }
    }
});

計算屬性還有兩個很實用的小技巧容易被忽略：一是計算屬性能夠依賴其餘計算屬性; 二是計算屬性不只能夠依賴當前Vue 實例的數據，還能夠依賴其餘實例的數據，例如：

    <div id="app1"></div>
    <div id="app2">{{ reverseText}}</div>

var app1 = new Vue({
   el: '#app1',
 data: {
      text: 'computed'
    }
});

var app2 = new Vue({
    el: '#app2',
    computed: {
        reverseText: function(){
            return app1.text.split('').reverse().join('');  //使用app1的數據進行計算
        }
    }
});

每個計算屬性都包含一個getter 和一個setter ，咱們上面的兩個示例都是計算屬性的默認用法，只是利用了getter 來讀取。

在你須要時，也能夠提供一個setter 函數，當手動修改計算屬性的值就像修改一個普通數據那樣時，就會觸發setter 函數，執行一些自定義的操做，例如：

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; } } } }); //如今再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。

絕大多數狀況下，咱們只會用默認的getter 方法來讀取一個計算屬性，在業務中不多用到setter,因此在聲明一個計算屬性時，能夠直接使用默認的寫法，沒必要將getter 和setter 都聲明。

3、計算屬性緩存

上面的例子，除了使用計算屬性外，咱們也能夠經過在表達式中調用方法來達到一樣的效果，如：

<div>{{reverseTitle()}}</div>

// 在組件中
methods: {
  reverseTitle: function () {
    return this.title.split('').reverse().join('')
  }
}

咱們能夠將同一函數定義爲一個方法而不是一個計算屬性，兩種方式的最終結果確實是徹底相同的。只是一個使用reverseTitle()取值，一個使用reverseTitle取值。

然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。

這就意味着只要 title尚未發生改變，屢次訪問 reverseTitle計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

舉個小例子：

        <div>{{reverseTitle}}</div>
        <div>{{reverseTitle1()}}</div>
        <button @click="add()">補充貨物1</button>
        <div>總價爲：{{price}}</div>

    computed: {
      reverseTitle: function(){
          return this.title.split('').reverse().join('')　　//而使用計算屬性，只要title沒變，頁面渲染是不會從新進這裏來計算的，而是使用了緩存。
      },
     price: function(){
         return this.package1.count*this.package1.price+this.package2.count*this.package2.price
     }
    },
    methods: {   //對象的方法
        add: function(){
            this.package1.count++
        },
        reverseTitle1: function(){
            return this.title.split('').reverse().join('')　　//點擊補充貨物，也會進這個方法，再次計算。不是刷新，而是隻要頁面渲染，就會進方法裏從新計算。
        }
    },