快捷導(dǎo)航

Vue 計算屬性 computed

更新時間：2021年10月26日 16:07:19 作者：Silent丿丶黑羽

這篇文章主要介紹了Vue 計算屬性 computed，一般情況下屬性都是放到data中的，但是有些屬性可能是需要經(jīng)過一些邏輯計算后才能得出來，那么我們可以把這類屬性變成計算屬性，下面我們來看看具體實例,需要的朋友可以參考一下

1、基礎(chǔ)例子

<div id="app">
  <h2>總價格：{{totalPrice}}</h2>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello",
      books: [
        {name: '三國演義', price: 30},
        {name: '紅樓夢', price: 40},
        {name: '西游記', price: 50},
        {name: '水滸傳', price: 60},
      ],
    },
    computed: {
      // 計算屬性的 getter
      totalPrice: function (){
          let result = 0;
          // `this` 指向 vm 實例
          for (let book of this.books){
            result += book.price;
          }
          return result
      }
    }
  })
</script>

結(jié)果：總價格：180

這里我們聲明了一個計算屬性 totalPrice。然后通過for循環(huán)計算出書的總價，像這種需要計算的屬性，就寫在computed中。

屬性一般都有get和set兩個方法，get獲取屬性值，set設(shè)置屬性值，computed中默認(rèn)就是get屬性，我們的vm.totalPrice是依賴于books.price，如果書本的價格發(fā)生變化，那么計算屬性totalPrice也隨之動態(tài)變化

2、計算屬性緩存 vs 方法

你可能已經(jīng)注意到我們可以通過在表達(dá)式中調(diào)用方法來達(dá)到同樣的效果：

<div id="app">
  <h2>總價格：{{getAllPrice()}}</h2>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello",
      books: [
        {name: '三國演義', price: 30},
        {name: '紅樓夢', price: 40},
        {name: '西游記', price: 50},
        {name: '水滸傳', price: 60},
      ],
    },
    methods: {
      getAllPrice: function () {
        let result = 0;
        // `this` 指向 vm 實例
        for (let book of this.books){
          result += book.price;
        }
        return result
      }
    },
  })
</script>

我們可以將同一函數(shù)定義為一個方法而不是一個計算屬性。兩種方式的最終結(jié)果確實是完全相同的。然而，不同的是計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。這就意味著只要 books 還沒有發(fā)生改變，多次訪問 totalPrice 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。

所以說計算屬性是有緩存的

我們?yōu)槭裁葱枰彺?？假設(shè)我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數(shù)組并做大量的計算。然后我們可能有其他的計算屬性依賴于 A。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請用方法來替代。

3、計算屬性的 setter

計算屬性默認(rèn)只有 getter，不過在需要時你也可以提供一個 setter：

computed: {
  totalPrice: {
    get: function () {
      let result = 0;
      // `this` 指向 vm 實例
      for (let book of this.books){
        result += book.price;
      }
      return result
    },
    set: function (newValue) {
      for (let book of this.books){
        book.price += 10
      }
    }
  }
}

這里我們添加了set方法，在運行vm.totalPrice=[...]時，setter 會被調(diào)用，隨后書本的總價格也會隨之變化，但是一般情況下不會使用set

到此這篇關(guān)于Vue 計算屬性 computed的文章就介紹到這了,更多相關(guān)Vue computed內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: