1、前言

本篇是Vue中最常用到的API之一computed屬性，轉(zhuǎn)載信息如下：

作者：gunelark
鏈接：https://www.cnblogs.com/gunelark/p/8492468.html

2、正文

看了網(wǎng)上很多資料，對vue的computed講解自己看的都不是很清晰，今天忙里抽閑，和同事們又閑聊起來，對computed這個屬性才有了一個稍微比較清晰的認(rèn)識，下面的文章有一部分是轉(zhuǎn)自： https://www.w3cplus.com/vue/vue-computed-intro.html --w3cplus.com

感覺這篇文章上面的例子通俗易懂，所以此處借用了。

自己的理解：

• computed用來監(jiān)控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁面上進行雙向數(shù)據(jù)綁定展示出結(jié)果或者用作其他處理；
• computed比較適合對多個變量或者對象進行處理后返回一個結(jié)果值，也就是數(shù)多個變量中的某一個值發(fā)生了變化則我們監(jiān)控的這個值也就會發(fā)生變化，舉例：購物車?yán)锩娴纳唐妨斜砗涂偨痤~之間的關(guān)系，只要商品列表里面的商品數(shù)量發(fā)生變化，或減少或增多或刪除商品，總金額都應(yīng)該發(fā)生變化。這里的這個總金額使用computed屬性來進行計算是最好的選擇

與watch之間的區(qū)別：

剛開始總是傻傻分不清到底在什么時候使用watch，什么時候使用computed。這里大致說一下自己的理解：

• watch主要用于監(jiān)控vue實例的變化，它監(jiān)控的變量當(dāng)然必須在data里面聲明才可以，它可以監(jiān)控一個變量，也可以是一個對象，但是我們不能類似這樣監(jiān)控，比如：

watch:{
????goodsList.price(newVal,oldVal){
????????//監(jiān)控商品列表中是商品價格
????}
}

這樣會報錯。只能監(jiān)控整個對象或單個變量，如下所示：

data(){
　return?{
　　　example0:"",
　　　example1:"",
　　　example2:{
?　　　　　inner0:1,?　　　　　　　　　
?????????innner1:2?　　　　　　　　　
?????}
　}
},
watch:{
　?example0(newVal,oldVal){//監(jiān)控單個變量
???????……
??}，
??example2(newVal,oldVal){//監(jiān)控對象
???????……
??}，
}

• watch一般用于監(jiān)控路由、input輸入框的值特殊處理等等，它比較適合的場景是一個數(shù)據(jù)影響多個數(shù)據(jù)
  以下內(nèi)容是摘自https://www.w3cplus.com/vue/vue-computed-intro.html w3cplus.com

計算屬性可用于快速計算視圖（View）中顯示的屬性。這些計算將被緩存，并且只在需要時更新。

在Vue中有多種方法為視圖設(shè)置值：

• 使用指令直接將數(shù)據(jù)值綁定到視圖
• 使用簡單的表達式對內(nèi)容進行簡單的轉(zhuǎn)換
• 使用過濾器對內(nèi)容進行簡單的轉(zhuǎn)換

除此之外，我們還可以使用計算屬性根據(jù)數(shù)據(jù)模型中的值或一組值來計算顯示值。

計算屬性

計算屬性允許我們對指定的視圖，復(fù)雜的值計算。這些值將綁定到依賴項值，只在需要時更新。

例如，我們可以在數(shù)據(jù)模型中有一個results數(shù)組：

假設(shè)我們想要查看所有主題的總數(shù)。我們不能使用filters或expressions來完成這個任務(wù)。

• filters：用于簡單的數(shù)據(jù)格式，在應(yīng)用程序的多個位置都需要它
• expressions：不允許使用流操作或其他復(fù)雜的邏輯。他們應(yīng)該保持簡單

這個時候，計算屬性就可以派上用場。我們可以向模型中添加一個計算值，如下：

效果如下：

計算屬性 VS 方法

我們可以使用Vue中的method計算出學(xué)科的總分，最終得到的總數(shù)結(jié)果是相同的。

在上例的基礎(chǔ)上，我們把computed區(qū)塊中的totalMarks函數(shù)整體移到methods中。同時在模板中將{{ totalMarks }} 替換成{{ totalMarks() }}。 你最終看到的結(jié)果是一樣的，如下所示：

雖然這兩種方式輸出的結(jié)果是相同的，但是性能將遭受毀滅性的打擊。使用這種方法totalMarks()方法在每次頁面渲染時都被執(zhí)行一次（例如，使用每一個change）。

如果我們有一個計算屬性，那么Vue會記住計算的屬性所依賴的值（在我們這個示例中，那就是results）。通過這樣做，Vue只有在依賴變化時才可以計算值。否則，將返回以前緩存的值。這也意味著只要results還沒有發(fā)生改變，多次訪問totalMark計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。

上面兩個示例也說明，在Vue中計算屬性是基于它們的依賴進行緩存的，而方法是不會基于它們的依賴進行緩存的。從而使用計算屬性要比方法性能更好。

這也同樣意味著下面的計算屬性將不再更新，因為Date.now()不是響應(yīng)式依賴：

相比之下，每當(dāng)觸發(fā)重新渲染時，方法的調(diào)用方式將總是再次執(zhí)行函數(shù)。因此，函數(shù)必須是一個純函數(shù)。它不能有副作用。輸出只能依賴于傳遞給函數(shù)的值。

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

計算屬性的setter

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

效果如下：

你在輸入框中輸入一個fullName，然后點擊set按鈕，可以看到對應(yīng)的效果。你現(xiàn)在再運行app.fullName="Airen liao"時，計算屬性的setter會被調(diào)用，app.firstName和app.lastName也相應(yīng)地會被更新。如下圖所示：

觀察者：

雖然計算屬性在大多數(shù)情況下更合適，但有時候也需要一個自定義的watcher。這是為什么Vue通過watch選項提供一個更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時，執(zhí)行異步操作或開銷較大的操作，這是很有用的。

Vue確實提供了一種更通用的方式來觀察和響應(yīng)Vue實例上的數(shù)據(jù)變動：watch屬性。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時，你很容易濫用watch。然而，通常更好的想法是使用計算屬性而不是命令式的watch回調(diào)。比如下面的示例：

上面代碼是命令式的和重復(fù)的。將它與計算屬性的版本進行比較：

---

我創(chuàng)建了一個用來記錄自己學(xué)習(xí)之路的公眾號，感興趣的小伙伴可以關(guān)注一下微信公眾號：niceyoo

總結(jié)

以上是生活随笔為你收集整理的Vue中的computed属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。