計算屬性computed如何傳參 · 常用筆記

# 計算屬性computed如何傳參 # 【vue】計算屬性computed如何傳參 #### 前言使用計算屬性可以讓模板內不需要放太多的計算邏輯，使得模板簡單維護性強。那么如果希望使用計算屬性傳入一個參數時該怎么寫呢？ #### 正文比如下面的數據，希望循環輸出時將`type`的值進行轉化，得到具體的用戶類型（`1代表學生，2代表老師`） ``` <pre class="calibre13">``` data: { userlist:[ { name:'張三', type:1 }, { name:'王二', type:2 } ] }, ``` ``` 如果直接按如下方式給計算屬性傳參是不行的 ``` <pre class="calibre13">``` <ul> <li v-for="item,index in userlist"> <span>{{item.name}}</span> <span>{{usertype(item.type)}}</span> </li> </ul> ``` ``` ``` <pre class="calibre13">``` computed: { usertype(value){ var user = '' return value === 1 ? user = '學生' : user = '老師' } } ``` ``` 結果會報錯：`usertype is not a function` **原因** 上圖調用計算屬性的代碼是`usertype(item.type)`，而我們不去傳參時是這樣調用的`usertype`。說明`usertype`調用了計算屬性得到計算屬性的`返回值`，然后再執行`返回值(item.type)`，但是這里`返回值`并不是函數無法執行，所以報錯：`usertype is not a function`。那么只需要讓計算屬性`返回一個函數`即可。 **采用閉包的形式**： ``` <pre class="calibre13">``` computed: { usertype(){ return function (value){ var user = '' value === 1 ? user = '學生' : user = '老師' return user } } } ``` ``` > 這里采用閉包，計算屬性返回一個匿名函數，然后執行這個匿名函數并傳入參數，將判斷結果返回 #### 注意：傳參之后結果還會緩存嗎？ **計算屬性的好處：** 我們都知道使用計算屬性除了使得模板內容里邏輯簡單，便于維護。還有一個最重要的好處，那就是`緩存結果`。這也就是明明我們在`methods`里定義同樣的方法函數可以與`computed`得到同樣的結果，卻不用`methods`的原因。 > - 每次調用`methods`里的函數都要去重新執行，試想一下如果一個函數的邏輯過于復雜，那么每次調用的性能消耗都是巨大的。 > - 而`computed`會將第一次執行的結果緩存，以后每一次調用時都是直接讀取緩存結果而不是執行。 > - `計算屬性是基于它們的響應式依賴進行緩存`，只有相關的依賴發送改變才會重新求值 **測試：** 同時測試一下傳參和不傳參，看看它們的結果代碼： ``` <pre class="calibre13">``` <p>{{time1('傳參：')}}</p> <p>{{time1('傳參：')}}</p> <p>不傳參：{{time2}}</p> <p>不傳參：{{time2}}</p> ``` ``` ``` <pre class="calibre13">``` computed: { time1(){ return function (value){ return value+Date.now() } }, time2(){ return Date.now() } } ``` ``` 代碼說明：定義兩個計算屬性，`time1`傳參`time2`不傳參，分別執行兩次計算屬性。觀察結果： ![](https://img-blog.csdnimg.cn/20200326020627660.PNG) 結果說明：很明顯，傳參的計算屬性結果并沒有緩存，而是重新進行了計算 > 注意：可能你會得到兩次傳參的計算屬性結果一致，那是因為恰好兩次計算屬性同時執行，多刷新幾次沒有傳參的計算屬性返回的是最終的計算結果，而通過閉包傳參之后返回的是一個函數，這個函數執行之后再得到結果，那么這個和使用`methods`仿佛已經沒了區別。可以說，傳參之后的計算屬性已經不能稱為計算屬性，它甚至不能緩存數據，而使用計算屬性的目的之一，就是緩存數據。 #### 總結說到這里，雖然計算屬性可以通過閉包進行傳參，但它已經違背了計算屬性，所以使用計算屬性傳參不如使用`methods`。或許這也是為什么官方文檔并沒有提出計算屬性傳參的的內容吧！