[TOC] #### 1. 什么是計(jì)算屬性 --- 眾所周知，在模板中可以直接通過插值語法顯示一些 data 中的數(shù)據(jù)，但是在某些情況下，我們需要對數(shù)據(jù)進(jìn)行一些轉(zhuǎn)化后再顯示或需要將多個(gè)數(shù)據(jù)結(jié)合起來進(jìn)行顯示 當(dāng)然，此時(shí)可以通過使用模板表達(dá)式進(jìn)行轉(zhuǎn)化、拼接等處理，但如果需要轉(zhuǎn)化拼接，那么就需要使用多次模板表達(dá)式 模板內(nèi)的表達(dá)式非常便利，但是它們的設(shè)計(jì)初衷是用于簡單運(yùn)算的, 在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù) 那么, 此時(shí)我們可以使用計(jì)算屬性 (computed) 來解決這個(gè)問題 #### 2. 計(jì)算屬性的基本使用 ---  #### 3. computed 和 methods 的區(qū)別 --- computed 和 methods 看起來都可以實(shí)現(xiàn)我們的功能，那么它們有什么區(qū)別 ? 計(jì)算屬性會(huì)進(jìn)行緩存，多次使用時(shí)，計(jì)算屬性只會(huì)調(diào)用一次; 而 methods 不會(huì)緩存，每次使用都會(huì)調(diào)用里面的邏輯 補(bǔ)充: 計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，只有在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)才會(huì)重新求值   #### 4. 計(jì)算屬性的 setter 和 getter --- 計(jì)算屬性的完整寫法 一般情況下 set 方法是不需要實(shí)現(xiàn)的，當(dāng)沒有 set 方法時(shí)，計(jì)算屬性就相當(dāng)于是一個(gè)只讀屬性 get 方法的返回值就是計(jì)算屬性的值，當(dāng)計(jì)算屬性的值被修改時(shí)會(huì)觸發(fā) set 方法，其參數(shù)為新值 ``` computed: { name: { set(value){ }, get(){ return this.firstName + ' ' + this.lastName } } }, ``` 一般情況下，set 方法是不寫的，只寫一個(gè) get 方法就可以了，只寫一個(gè) get 方法也麻煩，于是有了下面的最終寫法 ``` computed: { name(){ return this.firstName + ' ' + this.lastName } }, ```