模板內(nèi)的表達(dá)式通常用于簡(jiǎn)單的運(yùn)算，當(dāng)其過(guò)長(zhǎng)或邏輯復(fù)復(fù)雜時(shí)，會(huì)變得難以維護(hù)

什么是計(jì)算屬性

在Vue應(yīng)用中，在模板中雙向綁定一些數(shù)據(jù)或者表達(dá)式，但是表達(dá)式如果過(guò)長(zhǎng)，或者邏輯更為復(fù)雜時(shí)，就會(huì)變得臃腫甚至難以維護(hù)和閱讀，比如

<div>
{{text.split(',').reverse().join(',')}}
</div>.

這里表達(dá)式包含三個(gè)操作，并不是很清晰，所以在遇到復(fù)雜的邏輯時(shí)應(yīng)該使用計(jì)算屬性，上例可以用計(jì)算屬性進(jìn)行改寫(xiě)：

<div id="CalculationProperties">
     {{ReversedText}}
 </div>
<script>
    var CalculationProperties = new Vue({
      el: "#CalculationProperties",
      data: {
        text:"123,456",
      },
      computed: {
        ReversedText: function ()
        {
          //所有計(jì)算屬性都以函數(shù)的形式寫(xiě)在Vue實(shí)例內(nèi)的computed選項(xiàng)內(nèi)，最終返回計(jì)算后的結(jié)果
          return this.text.split(',').reverse().join(',')
        }
      }
    })
</script>

所有計(jì)算屬性都以函數(shù)的形式寫(xiě)在Vue實(shí)例內(nèi)的computed選項(xiàng)內(nèi)，最終返回計(jì)算后的結(jié)果

計(jì)算屬性用法

在一個(gè)計(jì)算屬性里可以完成各種復(fù)雜的邏輯，包括邏輯運(yùn)算、函數(shù)調(diào)用等，只要最終返回一個(gè)結(jié)果就可以。除了上面的簡(jiǎn)單的用法，計(jì)算屬性還可以依賴(lài)多個(gè)vue實(shí)例的數(shù)據(jù)，只要其中人一個(gè)數(shù)據(jù)變化，計(jì)算屬性就會(huì)重新執(zhí)行，視圖也會(huì)更新，例如下面的例子展示的是購(gòu)物車(chē)內(nèi)兩個(gè)包裹的物品總價(jià)

<div id="prices">
     總價(jià)： {{prices}}
    </div>
 <script>
    // <!--購(gòu)物車(chē)總價(jià)-->
    var prices = new Vue({
      el: "#prices",
      data: {
        package1: [
        {
          name: "華為mate20pro",
          price: 4566,
          count: 2
        },
        {
          name: "華為p30",
          price: 4166,
          count: 2
        },
        ],
        package2: [
        {
          name: "蘋(píng)果",
          price: 30,
          count: 2
        },
        {
          name: "香蕉",
          price: 2,
          count: 20
        },
        ]
      },
      computed: {
        prices: function () {
          var prices = 0;
          debugger
          for (var i = 0; i < this.package1.length; i++) {
            prices += this.package1[i].price * this.package1[i].count;
          }
          for (var i = 0; i < this.package2.length; i++) {
            prices += this.package2[i].price * this.package2[i].count;
          }
          return prices;
        }
      }
    })
 </script>

       當(dāng)package1或package2中的商品發(fā)生變化，比如購(gòu)買(mǎi)數(shù)量變化或者增刪商品時(shí)，計(jì)算屬性prices就會(huì)自動(dòng)更新，視圖中的總價(jià)也會(huì)自動(dòng)變化

       每個(gè)計(jì)算屬性都包含一個(gè)getter和setter，上面的例子都是計(jì)算屬性默認(rèn)用法，只是利用了getter來(lái)讀取。在你需要時(shí)，也可以提供一個(gè)setter函數(shù)，當(dāng)手動(dòng)修改計(jì)算屬性的值就像修改一個(gè)普通數(shù)據(jù)那樣，就會(huì)觸發(fā)setter函數(shù)，執(zhí)行一些自定義的操作。

<!--setter-->
    <div id="setter">
     姓名： {{fullName}}
    </div>
<script>
 var setter = new Vue({
      el: "setter",
      data: {
        firstName: 'Jack',
        lastName:'Green'
      },
      computed: {
        fullName: {
          //getter,用于讀取
          get: function ()
          {
            return this.firstName + ' ' + this.lastName
          },
          //setter，寫(xiě)入時(shí)觸發(fā)
          set: function (newValue)
          {
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          }
        }
      }
    })
</script>

       當(dāng)執(zhí)行 setter.fullName='Join Doe'時(shí)候，setter就會(huì)被調(diào)用，數(shù)據(jù)firstName和lastName都會(huì)相對(duì)更新，視圖同樣也會(huì)更新

       絕大多情況下，我們只會(huì)使用默認(rèn)的getter方法來(lái)讀取一個(gè)計(jì)算屬性，在業(yè)務(wù)中很少使用到setter，所以在聲明一個(gè)計(jì)算屬性的時(shí)候，可以直接使用默認(rèn)的寫(xiě)法，不必將getter和setter都聲明

       計(jì)算屬性除啦以上簡(jiǎn)單的文本插值外，還經(jīng)常用于動(dòng)態(tài)的設(shè)置元素的樣式名稱(chēng)class和內(nèi)聯(lián)樣式style，當(dāng)使用組件時(shí)，計(jì)算屬性也經(jīng)常用來(lái)動(dòng)態(tài)傳遞props以后，我會(huì)慢慢介紹到

計(jì)算屬性還有兩個(gè)很使用的小技巧很容易被忽略，一是計(jì)算屬性可以依賴(lài)其他計(jì)算屬性，二是計(jì)算屬性不僅可以依賴(lài)當(dāng)前Vue實(shí)例的數(shù)據(jù)，還可以依賴(lài)其他Vue實(shí)例的數(shù)據(jù)

<div id="app1"></div>
 <div id="app2">
     {{reversedText}}
 </div>
<script>
    var app1 = new Vue({
      el: "#app1",
      data: {
        text: "123,456"
      }
    });
    var app2 = new Vue({
      el: "#app2",
      computed: {
        reversedText: function () {
          //這里是依賴(lài)app1實(shí)例中的數(shù)據(jù)text
          return app1.text.split(',').reverse().join(',')
        }
      }
    })
</script>

這里我們創(chuàng)建了兩個(gè)vue實(shí)例app1和app2，在app2的計(jì)算屬性reversedText中，依賴(lài)的是app1的數(shù)據(jù)text，所以當(dāng)text變化時(shí)，實(shí)例app2的計(jì)算屬性也會(huì)變化，這樣的用法以后用到的也會(huì)比較多，尤其是在多人協(xié)同開(kāi)發(fā)時(shí)很常用，以為你寫(xiě)的組件所用到的數(shù)據(jù)需要依賴(lài)他人的組件提供，以后接觸的多了就會(huì)慢慢的意識(shí)到這一點(diǎn)。

計(jì)算屬性緩存

其實(shí)細(xì)心的話(huà)就會(huì)發(fā)現(xiàn)，調(diào)用methods里的方法也能實(shí)現(xiàn)和計(jì)算屬性一樣的效果，甚至有的方法還能接收參數(shù)，使用起來(lái)更加的靈活，既然使用methods就可以實(shí)現(xiàn)，那為什么還需要計(jì)算屬性呢？原因就是計(jì)算屬性是基于他的依賴(lài)緩存的。一個(gè)計(jì)算屬性所依賴(lài)的數(shù)據(jù)發(fā)生變化時(shí)，他才會(huì)重新取值，所以依賴(lài)的text只要不改變。計(jì)算屬性也就不更新

computed：{
now：function（）
{
return Date.now()
}
}

這里的Date.now()不是響應(yīng)式依賴(lài)，所以計(jì)算屬性now 不會(huì)更新，但是methods則不同，只要重新渲染他就會(huì)被調(diào)用，因此函數(shù)也會(huì)被執(zhí)行。

使用計(jì)算屬性還是methods取決于你是否需要緩存，當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)，應(yīng)當(dāng)使用計(jì)算屬性，除非你不希望得到緩存

以上就是詳解Vue之計(jì)算屬性的詳細(xì)內(nèi)容，更多關(guān)于vue 計(jì)算屬性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！