9、Vue中的computed屬性

 

看了網上不少資料，對vue的computed講解本身看的都不是很清晰，今天忙裏抽閒，和同事們又閒聊起來，對computed這個屬性纔有了一個稍微比較清晰的認識，下面的文章有一部分是轉自： https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com，

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

本身的理解：

• computed用來監控本身定義的變量，該變量不在data裏面聲明，直接在computed裏面定義，而後就能夠在頁面上進行雙向數據綁定展現出結果或者用做其餘處理；
• computed比較適合對多個變量或者對象進行處理後返回一個結果值，也就是數多個變量中的某一個值發生了變化則咱們監控的這個值也就會發生變化，舉例：購物車裏面的商品列表和總金額之間的關係，只要商品列表裏面的商品數量發生變化，或減小或增多或刪除商品，總金額都應該發生變化。這裏的這個總金額使用computed屬性來進行計算是最好的選擇

與watch之間的區別：

　　剛開始老是傻傻分不清到底在何時使用watch，何時使用computed。這裏大體說一下本身的理解：

• watch主要用於監控vue實例的變化，它監控的變量固然必須在data裏面聲明才能夠，它能夠監控一個變量，也能夠是一個對象，可是咱們不能相似這樣監控，好比：

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

這樣會報錯。只能監控整個對象或單個變量，以下所示：

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

}

• watch通常用於監控路由、input輸入框的值特殊處理等等，它比較適合的場景是一個數據影響多個數據

如下內容是摘自https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com：

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

在Vue中有多種方法爲視圖設置值：

• 使用指令直接將數據值綁定到視圖
• 使用簡單的表達式對內容進行簡單的轉換
• 使用過濾器對內容進行簡單的轉換

除此以外，咱們還可使用計算屬性根據數據模型中的值或一組值來計算顯示值。

計算屬性

計算屬性容許咱們對指定的視圖，複雜的值計算。這些值將綁定到依賴項值，只在須要時更新。

例如，咱們能夠在數據模型中有一個results數組：

假設咱們想要查看全部主題的總數。咱們不能使用filters或expressions來完成這個任務。

• filters：用於簡單的數據格式，在應用程序的多個位置都須要它
• expressions：不容許使用流操做或其餘複雜的邏輯。他們應該保持簡單

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

效果以下：

計算屬性 vs 方法

咱們可使用Vue中的method計算出學科的總分，最終獲得的總數結果是相同的。

在上例的基礎上，咱們把computed區塊中的totalMarks函數總體移到methods中。同時在模板中將{{ totalMarks }} 替換成{{ totalMarks() }}。 你最終看到的結果是同樣的，以下所示：

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

若是咱們有一個計算屬性，那麼Vue會記住計算的屬性所依賴的值（在咱們這個示例中，那就是results）。經過這樣作，Vue只有在依賴變化時才能夠計算值。不然，將返回之前緩存的值。這也意味着只要results尚未發生改變，屢次訪問totalMark計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

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

這也一樣意味着下面的計算屬性將再也不更新，由於Date.now()不是響應式依賴：

相比之下，每當觸發從新渲染時，方法的調用方式將老是再次執行函數。所以，函數必須是一個純函數。它不能有反作用。輸出只能依賴於傳遞給函數的值。

那麼咱們爲何須要緩存？假設咱們有一個性能開銷比較大的的計算屬性A，它須要遍歷一個極大的數組和作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存，咱們將不可避免的屢次執行 A 的 getter！若是你不但願有緩存，請用方法來替代。

計算屬性的setter

計算屬性默認只有getter，不過在須要時你也能夠提供一個setter

效果以下：

你在輸入框中輸入一個fullName，而後點擊set按鈕，能夠看到對應的效果。你如今再運行app.fullName="Airen liao"時，計算屬性的setter會被調用，app.firstName和app.lastName也相應地會被更新。以下圖所示：

觀察者：

雖然計算屬性在大多數狀況下更合適，但有時候也須要一個自定義的watcher。這是爲何Vue經過watch選項提供一個更通用的方法，來響應數據的變化。當你想要在數據變化響應時，執行異步操做或開銷較大的操做，這是頗有用的。

Vue確實提供了一種更通用的方式來觀察和響應Vue實例上的數據變更：watch屬性。當你有一些數據須要隨着其它數據變更而變更時，你很容易濫用watch。然而，一般更好的想法是使用計算屬性而不是命令式的watch回調。好比下面的示例：

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

 

 

假設咱們想要查看全部主題的總數。咱們不能使用 filters或 expressions來完成這個任務著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

除此以外，咱們還可使用計算屬性根據數據模型中的值或一組值來計算顯示值。著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

在Vue中有多種方法爲視圖設置值：

• 使用指令直接將數據值綁定到視圖
• 使用簡單的表達式對內容進行簡單的轉換
• 使用過濾器對內容進行簡單的轉換

除此以外，咱們還可使用計算屬性根據數據模型中的值或一組值來計算顯示值。

著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

計算屬性可用於快速計算視圖（ View）中顯示的屬性。這些計算將被緩存，而且只在須要時更新。著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

計算屬性可用於快速計算視圖（ View）中顯示的屬性。這些計算將被緩存，而且只在須要時更新。著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

計算屬性可用於快速計算視圖（ View）中顯示的屬性。這些計算將被緩存，而且只在須要時更新。著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com