[TOC] #### 1. 什么是計算屬性 --- 眾所周知,在模板中可以直接通過插值語法顯示一些 data 中的數(shù)據(jù),但是在某些情況下,我們需要對數(shù)據(jù)進行一些轉(zhuǎn)化后再顯示或需要將多個數(shù)據(jù)結(jié)合起來進行顯示 當然,此時可以通過使用模板表達式進行轉(zhuǎn)化、拼接等處理,但如果需要轉(zhuǎn)化拼接,那么就需要使用多次模板表達式 模板內(nèi)的表達式非常便利,但是它們的設(shè)計初衷是用于簡單運算的, 在模板中放入太多的邏輯會讓模板過重且難以維護 那么, 此時我們可以使用計算屬性 (computed) 來解決這個問題 #### 2. 計算屬性的基本使用 --- ![](https://img.itqaq.com/art/content/a9d8f8c2d143143ddb1ad43505c1bfca.png) #### 3. computed 和 methods 的區(qū)別 --- computed 和 methods 看起來都可以實現(xiàn)我們的功能,那么它們有什么區(qū)別 ? 計算屬性會進行緩存,多次使用時,計算屬性只會調(diào)用一次; 而 methods 不會緩存,每次使用都會調(diào)用里面的邏輯 補充: 計算屬性是基于它們的響應(yīng)式依賴進行緩存的,只有在相關(guān)響應(yīng)式依賴發(fā)生改變時才會重新求值 ![](https://img.itqaq.com/art/content/de5c037322b0b15ea7d0dc6c9ec2564f.png) ![](https://img.itqaq.com/art/content/33ef9611ed551a0ad2fb0d33a5d6c5c9.png) #### 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 } }, ```