Vue 2.0學習筆記： Vue中的computed屬性

時間 2019-11-13

標籤 vue 2.0 學習筆記 computed 屬性简体版

原文原文鏈接

Vue中的computed屬性稱爲計算屬性。在這一節中，咱們學習Vue中的計算屬性如何使用？記得在學習Vue的模板相關的知識的時候，知道在模板內可使用表達式，並且模板內的表達式是很是的便利，但這種遍歷是有必定的限制的，它們其實是用於一些簡單的運算。也就是說，若是在模板中放入太多的邏輯會讓模板太重並且難以維護。我們先來看一個示例：html

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

在這個示例中，模板再也不簡單和清晰。你必須看一段時間才能意識到，這裏是想要顯示變量message的翻轉字符串。當你想要在模板中屢次引用此處的翻轉字符串時，就會更加難以處理。vue

這就是對於任何複雜邏輯，你都應當使用計算屬性的緣由。接下來我們一塊兒來學習Vue中的計算屬性。git

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

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

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

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

計算屬性

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

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

 1 data () {
 2     return {
 3         results: [
 4             {
 5                 name: 'English',
 6                 marks: 70
 7             },
 8             {
 9                 name: 'Math',
10                 marks: 80
11             },
12             {
13                 name: 'History',
14                 marks: 90
15             }
16         ]
17     }
18 }

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

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

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

 1 computed: {
 2     totalMarks: function () {
 3         let total = 0
 4         let me = this
 5         for (let i = 0; i < me.results.length; i++) {
 6             total += parseInt(me.results[i].marks)
 7         }
 8         return total
 9     }
10 }

totalMarks計算屬笥使用數組resultes的marks計算出總值。它只是循環遍歷值並返回子總數。

而後，咱們能夠在視圖中顯示計算值：

1 <div id="app">
2     <div v-for="subject in results">
3         <input v-model="subject.marks">
4         <span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
5     </div>
6     <div>
7         Total marks are: {{ totalMarks }}
8     </div>
9 </div>

計算屬性 vs 方法

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

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

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

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

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

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

computed: {
    now: function () {
        return Date.now()
    }
}

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

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

計算屬性的 `setter`

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

computed: {
    fullName: {
        // getter
        get: function () {
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}

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

觀察者

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

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

<div id="app">
    {{ fullName }}
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        }
    },
    watch: {
        firstName: function (val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
            this.fullName = this.firstName + ' ' + val
        }
    }
})

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

 1 let app = new Vue({
 2     el: '#app',
 3     data () {
 4         return {
 5             firstName: 'Foo',
 6             lastName: 'Bar'
 7         }
 8     },
 9     computed: {
10         fullName: function () {
11             return this.firstName + ' ' + this.lastName
12         }
13     }
14 })

在Vue中使用異步計算屬性

Vue中的計算屬性很是好。它們容許你執行復雜的操做或數據格式，同時最大限度地執行依賴項計算的性能，只在依賴更改時更新視圖。但遺憾的是，它們徹底是同步的。

值得慶幸的是，有一個插件。使用vue-async-computed包能夠通地將一個promise的值綁定到組件屬性來建立和使用組件中的異步計算屬性。

咱們能夠在項目的根目錄下經過yarn或npm來安裝vue-async-computed插件：

# Yarn
$ yarn add vue-async-computed
# NPM
$ npm i vue-async-computed --save

接下來在你的項目中開啓這個插件：

// main.js
import Vue from 'vue';
import AsyncComputed from 'vue-async-computed'
import App from 'App.vue';

Vue.use(AsyncComputed);

new Vue({
    el: '#app',
    render: h => h(App)
});

若是你和我同樣，對Vue的構建工具不是很熟悉的話，我建議你使用Vue官方提供的構建工具 Vue CLI。默認狀況，它提供了五種模板，你能夠根據本身喜歡的方式選擇本身須要的模板便可。

確認在項目中引用vue-async-computed以後，我們就能夠開始使用這個插件了。使用如何使用這個插件以前，先來簡單的瞭解一些概念。

在Vue中標準計算屬性和異步屬性之間有一些區別：

異步屬性不能有setter
直到promise的resolve爲止，除非default被設置，不然該值爲null

在大多數狀況下，你能夠將它們視爲返回promise的計算屬性。

 1 <!-- MyComponent.vue -->
 2 <template>
 3     <!-- 在一兩秒後 myResolvedValue將變成"*Fancy* Resolved Value" -->
 4     <h2>Asynchronous Property {{ myResolvedValue }}</h2>
 5 </template>
 6 
 7 <script>
 8     export default {
 9         asyncComputed: {
10             myResolvedValue () {
11                 return new Promise((resolve, reject) => {
12                     setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
13                 })
14             }
15         }
16     }
17 </script>

使用ES7 / ES2016的async / await，這將變得更簡單：

 1 <!-- MyComponent.vue -->
 2 <template>
 3     <!-- 在一兩秒後 myResolvedValue將變成"*Fancy* Resolved Value" -->
 4     <h2>Asynchronous Property {{ myResolvedValue }}</h2>
 5 </template>
 6 
 7 <script>
 8     function fancinessComesLater () {
 9         return new Promise((resolve, reject) => {
10             setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
11         })
12     }
13 
14     export default {
15         asyncComputed: {
16             async myResolvedValue() {
17                 return await fancinessComesLater()
18             }
19         }
20     }
21 </script>

有關於vue-async-computed更詳細的使用和介紹，能夠閱讀其官網提供的相關介紹。

總結

今天主要學習了Vue中的計算屬性。在Vue中的計算屬性可讓咱們很好的監聽多個數據或者一個數據來維護返回一個狀態值，只要其中一個或多個數據發生變化，則會從新計算整個函數體，從新皇家馬德里回狀態值，從而更新對應的視圖（View）。其次，計算屬性具備緩存，相比Vue中的方法而言，性能更佳。但Vue中的計算屬性都是同步的，若是須要異步咱們得依賴於vue-async-computed。