當設置vm.didiFamily的值時，vm.didi和vm.family的值也會自動更新

如果還不是很理解上面這段內容的意思，那我們可以看一個簡單一點的例子：

    a=>`a`
    

    b=>`b`

盡管data 里面沒有聲明屬性 b，但是我們通過computed 返回了一個屬性b，并返回了一個b的屬性值2，查看頁面效果截圖：

此時，我們可以在控制臺通過給 屬性a 重新賦值，并將新的賦值渲染到HTML頁面上

a的值變成了30，但是b 的值還是2，沒有發生任何變化，我們也可以把屬性a 和 屬性b 關聯起來：

    a => `a`
    

    b => `b`

點擊頁面以后，屬性a 重新賦值為100，屬性b 變成了101

如果反過來，我們想通過b 來改變a，可以嗎？不妨在原代碼的基礎上試一試：

當重新給b 賦值時，頁面中的a 和 b 都沒有發生任何變化。我們剛剛說到，computed里面的 b默認調用的是 getter，其實，還有一個setter。

示例代碼：

    a => `a`
    

    b => `b`

從代碼中可以看到，屬性b 接受的值是在 a 的基礎上加1，屬性b 設置的值是直接賦給a 的。所以重新給b賦值為300時，是把a 變成了300，b在a的基礎上加1

再來看一個官方提供的例子：

    
Original message: "`message`"
    
Computed reversed message: "`reversedMessage`"

這里我們聲明了一個計算屬性 reversedMessage 。我們提供的函數將用作屬性 vm.reversedMessage 的 getter 。

console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'

你可以打開瀏覽器的控制臺，修改 vm 。 vm.reversedMessage 的值始終取決于 vm.message 的值。

你可以像綁定普通屬性一樣在模板中綁定計算屬性。 Vue 知道 vm.reversedMessage 依賴于 vm.message ，因此當 vm.message 發生改變時，依賴于 vm.reversedMessage 的綁定也會更新。而且最妙的是我們是聲明式地創建這種依賴關系：計算屬性的 getter 是干凈無副作用的，因此也是易于測試和理解的。

2、計算緩存 vs Methods

上例的效果我們也可以通過調用表達式中的method來實現：

Reversed message: "{{ reverseMessage() }}"

// in component
methods: {
    reverseMessage: function () {
        return this.message.split('').reverse().join('')
    }
}

不經過計算屬性，我們可以在 method 中定義一個相同的函數來替代它。對于最終的結果，兩種方式確實是相同的。然而，不同的是計算屬性是基于它的依賴緩存。計算屬性只有在它的相關依賴發生改變時才會重新取值。這就意味著只要 message 沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

這也同樣意味著如下計算屬性將不會更新，因為 Date.now() 不是響應式依賴：

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

相比而言，每當重新渲染的時候，method 調用總會執行函數。

我們為什么需要緩存？假設我們有一個重要的計算屬性 A ，這個計算屬性需要一個巨大的數組遍歷和做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter ！如果你不希望有緩存，請用 method 替代。

3、計算屬性 vs Watched Propety

Vue.js 提供了一個方法 $watch ，它用于觀察 Vue 實例上的數據變動。當一些數據需要根據其它數據變化時， $watch 很誘人 —— 特別是如果你來自 AngularJS 。不過，通常更好的辦法是使用計算屬性而不是一個命令式的 $watch 回調。思考下面例子：

{{ fullName }}

上面代碼是命令式的和重復的。跟計算屬性對比：

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: function () {
            return this.firstName + ' ' + this.lastName
        }
    }
})

4、計算setter

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

{{ fullName }}

現在在運行 vm.fullName = 'Steven Cury' 時， setter 會被調用， vm.firstName 和 vm.lastName 也會被對應更新。

5、常見問題

（1）、計算屬性getter不執行的場景

當計算屬性依賴的數據屬性發生改變時，計算屬性的getter方法會執行。但是在有些情況下，雖然依賴數據屬性發生了改變，但計算屬性的getter方法并不會執行。

當包含計算屬性的節點被移除并且模板中其他地方沒有再引用該屬性時，那么對應的計算屬性的getter方法不會執行

    Toggle Show Total Price
    
`totalPrice`
    Total Price = `totalPrice`

當點擊按鈕是showTotal為false時，此時P元素會被移除，在P元素內部的計算屬性totalPrice的getter方法不會執行。但是當計算屬性一直出現在模板中時，getter方法還是會被執行

創新互聯www.cdcxhl.cn，專業提供香港、美國云服務器，動態BGP最優骨干路由自動選擇，持續穩定高效的網絡助力業務部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統配攻擊溯源，準確進行流量調度，確保服務器高可用性。佳節活動現已開啟，新人活動云服務器買多久送多久。

分享至：

   

關于我們

公司簡介 發展歷程

服務項目

高端網站建設 小程序開發 APP開發 網絡營銷

建站知識

網站建設 網站設計 網站制作 小程序

聯系我們

公司地址 人才招聘

成都 重慶



電話：028-86922220



地址：成都市太升南路288號錦天國際A幢1002號



電話：028-86922220



地址：重慶市南岸區彈子石騰龍大道58號2棟21-6

版權所有：成都創新互聯科技有限公司重慶分公司 渝ICP備2021005571號-4