vue3 computed, method
我們在學習vue的時候最常用到的就是computed,跟method這兩種語法，那麼這兩種的差異在哪裏？又是什麼時候適用呢？
首先，這篇文章會以vue3的寫法為基礎，也就是composition API的寫法。對於一開始就接觸的我，覺得這樣的寫法反而滿親民(?)的。
computed()
computed()的特點
computed() 一定會返回數值，通常會用return的形式
基本寫法
const plusFn = computed(() =>{
//要執行的函數
})computed的優點
如果響應式數據沒有更新就不會觸，可以緩存資料，省略不必要的計算，提升效能
computed裡面的get, set屬性
computed默認式read only(只能讀取參數)，但在某些情況下透過get()與set()這兩個方法，可以寫入數值
get:取值，無法寫入數值，不可帶入參數
set:寫入值，可帶入參數
const plusFn = computed(() =>{
get() {
}
set(value) {
}
//要執行的函數
})methods
我們可以把她想像成function的寫法，無論響應式數據有沒有變動，都會調用
const plusFn(element) {
//要執行的函數
}
methods的特點
使用methods不一定要返回數值，同時也不一定要給參數(可給可不給)
但只要觸發就一定會執行，不管內部的ref有沒有更新
在模板上的寫法
當我們採用computed跟methods時，要注意template上的寫法會有不一樣，在methods上要加上括號
computed
{{plusOne}}
methods
{{plusOne()}}參考資料
https://cn.vuejs.org/api/reactivity-core.html#computed
Comments