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