在如今程式設計都提出MVC、MVP或MVVM等模式的情況下，如果你還將業務邏輯和檢視層合在一起的話，會被人家笑掉大牙的。在Vue3.0中，在HTML(相當於檢視層)插值方式是可以負責計算(相當於業務邏輯)，但不提倡你這麼用，因為Vue3.0有計算屬性。
7.1 計算屬性將計算放置在模板中，模板將不再是簡單的和宣告性的，此時，你必須先看一下它，然後才能意識到它執行的計算取決於chen.lang。如果要在模板中多次包含此計算，則問題會變得更糟。
所以，對於任何包含響應式資料的複雜邏輯，你都應該使用計算屬性，聽到了沒？如果沒有的話，那就看看程式碼吧。計算屬性放在computed裡面，函式放在methods裡面。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0計算屬性</title> <script src="vue.global.js"></script></head><body><span id="app"> <span>在插值中計算的結果：{{ chen.lang.length > 10 ? '太多了' : '還好' }} </span><br/> <span>獲取計算屬性的結果：{{ langCount }}</span></span><script> Vue.createApp({ data() { return { chen: { name: 'IT界老傢伙', lang: [ 'Python', '前端', '小程式', 'Java', 'Android App', 'iOS App' ] } } }, computed: { // 計算屬性的 getter langCount() { return this.chen.lang.length > 10 ? '太多了' : '還好' } } }).mount("#app")</script></body></html>輸出結果
細心的朋友，可能就會問了，那我用函式計算行不行。如果不考慮效能的話，當然可以的。只是函式和計算屬性的區域在於，計算屬性有快取的作用，而函式沒有。
在操作過程中，如果內容沒有改變，計算屬性不會重新計算，而函式每次都會進行計算。用函式計算的程式碼，我發出來，你自己複製進去就好。
#前端##Vue.js##JavaScript##程式設計師##Web#
最新評論