vue學習筆記21-25（計算屬性）

vue中的計算屬性（computed）

1、什麼是計算屬性

注：計算屬性的命名規範，它首先是一個屬性，是以最好按照一個屬性來進行命名，使用名詞進行命名，不要加入動詞。

再注：在mustache文法中不要加上小括号，因為這是屬性而不是函數，例子：

<h2>{{fullName}}</h2>

2、作用

對要是用的資料首先進行一定的處理，友善使用，簡化上方mustache中的内容，增強可讀性。

3、使用舉例

①簡單使用（隻讀屬性）

簡單實用隻使用了其中的getter用法，省略setter用法并進行簡寫,直接寫上一個函數（和methods裡面一樣）

例子：

conputed{
  totalPrice, function(){
    let result = 0
    for (let item of this.books){
      result += item.price
    }
    return result
  }
},
           

②完整使用（可讀寫屬性）

将getter和setter完整實作，getter通過計算獲得想要獲得的屬性值，setter多對原始資料(也就是data中的資料)進行修改

computed: {
  fullName: {
    // 進行修改的時候隻需要app.fullName = 'hello VueJs'即可（app是new vue的名字）
    set: function (newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    },
    get: function () {
      return this.firstName + ' ' + this.lastName;
    },
  }
},
           

4、與methods相比，為什麼使用computed：

computed 是基于它的依賴緩存，隻有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。 也就是說使用computed的性能會優于methods。

是以在簡單地把資料進行計算在進行展示的時候，最好多使用computed計算屬性，少使用methods，這樣能提高系統的效率。