Vue中的computed計算屬性
阿新 • • 發佈：2018-11-15
文章目錄
computed與watch的異同
不同點
- 觸發條件不同
computed計算屬性會依賴於使用它的data屬性，只要是依賴的data屬性值有變動，則自定義重新呼叫計算屬性執行一次。
watch則是在監控的data屬性值發生變動時，其會自動呼叫watch回撥函式。
- 執行速度不同
computed計算屬性的值是直接從快取中獲取，而不是重新編譯執行一次，因而其效能要高一些，尤其是在data
computed回撥函式時更是如此，所以說在Vue中，應該儘可能的多使用computed替代watch。
watch中的值需要data屬性重新編譯執行，因而其效能方面會有所損失。
- 使用方式不同
computed計算屬性的回撥函式方法可以直接在頁面中通過插值表示式——{{}}來獲取。此時我們不需要再data資料域中再定義一個與方法名相同的屬性。
watch中的方法名必須是data資料域中所存在的，否則無法使用。
相同點
都可以實現通過監控data資料域中屬性值的變化來觸發相應的回撥函式，進而實現我們特殊的邏輯業務處理功能。
示例
原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router</title> </head> <body> <div id="app"> <input type="text" v-model="lastName" placeholder="姓"> <input type="text" v-model="firstName" placeholder="名"> <h2>拼接：{{fullName}}</h2> </div> </body> <script src="../../../js/vue/vue/2.0/vue.js"></script> <script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script> <script type="application/javascript"> new Vue({ el:'#app' ,data:{ firstName:'' ,lastName:'' } ,computed:{ fullName:function () { return this.lastName + '·' + this.firstName; } } }); </script> </html>
結果
分析
通過上述程式碼，我們可以看到，我們僅僅在computed回撥函式域中定義了一個fullName回撥函式，當我們的函式所依賴的data屬性中的值有變動時，其會自動觸發fullName回撥函式，重新計算一下結果，因而其使用方式相較於watch而言，要簡練很多。
computed回撥函式域中的回撥函式方法可以在插值表示式{{}}中直接獲取返回結果而無需在data資料域中定義相關的屬性，這一點相較於watch中而言使用起來也更方便些。