前言：

一般情況下屬性都是放到data中的，但是有些屬性可能是需要經(jīng)過(guò)一些邏輯計(jì)算后才能得出來(lái)，那么我們可以把這類(lèi)屬性變成計(jì)算屬性。

比如以下：

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

在這個(gè)地方，模板不再是簡(jiǎn)單的聲明式邏輯。你必須看一段時(shí)間才能意識(shí)到，這里是想要顯示變量 message 的翻轉(zhuǎn)字符串。當(dāng)你想要在模板中的多處包含此翻轉(zhuǎn)字符串時(shí)，就會(huì)更加難以處理。

所以，對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性。

1、基礎(chǔ)例子

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

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

這里我們聲明了一個(gè)計(jì)算屬性 totalPrice。然后通過(guò)for循環(huán)計(jì)算出書(shū)的總價(jià)，像這種需要計(jì)算的屬性，就寫(xiě)在computed中。

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

2、計(jì)算屬性緩存 vs 方法

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

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

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

所以說(shuō)計(jì)算屬性是有緩存的

我們?yōu)槭裁葱枰彺妫考僭O(shè)我們有一個(gè)性能開(kāi)銷(xiāo)比較大的計(jì)算屬性 A，它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴(lài)于 A。如果沒(méi)有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請(qǐng)用方法來(lái)替代。

3、計(jì)算屬性的 setter

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

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

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

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

最新評(píng)論