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