3/17 Computed

[yhosutun2490]

這周是探討Vue3 Computed使用有疑問或筆記歡迎放在這裡喔~!

[janlin002]

讀書會提問的問題:

1. computed 可以取代 methods 嗎？

computed 必須有個依賴對象 也要回傳值，但 methods 是可以很多元的應用 甚至不需要有依賴對象

總結來說: 如果是點擊事件(或是跟使用者互動行為)的話，就使用 methods，然後單純是追蹤變數變化的話用 computed

2. 工作上使用 Vue3 會出現 data 做宣告嗎？我以為都使用 ref 或是 reactive

會用composition api

3. 我想問剛剛前面有個 reverse 的範例，因為有說 computed 不能修改本身的值，但為什麼用解構賦值就可以 是因為解構賦值是淺拷貝嗎?

4. 如果修改原本的值，會發生什麼事？失去響應式嗎？

正常來說不會發生什麼事XD，但原本引用的響應式資料也被更動了~~ 如果有其他元件或變數也引用他 大家會一起變動 很難追蹤

[yhosutun2490]

補充上面的問題3:
const data = ref([1,2,3,4,5])
const newData = computed(()=>[...data.value].reverse())

• 在computed 盡量避免mutated原始引用的響應式資料，造成不必要的side-Effect，解構賦值式對物件或陣列基本的淺拷貝(shallow copy)，因此reverse的是新一個新的參考資料，如果是更多層就需要JSON.stringify等深拷貝。

• 像是讀書會中提到的sort()排序方法，也是會造成原始資料mutate，所以有可能造成無限循環問題
  https://blog.csdn.net/qq_43886365/article/details/129655654

• 這篇的sortList變數是computed串接api回傳所得到的資料，但在computed裡面對原本api 資料list進行sort，因為原始資料mutate，computed又再次監聽到異動，而形成無限循環render。

可參考尤雨溪提供的複製解法
list.slice().sort()

[janlin002]

延伸問題:

computed set vs methods vs watch 差異

[Yanhuabcd820]

以同一個計算方法來比較的話
若在template上有多處使用method，那就要跑很多次
但因為computed有緩存且更新時才會重新計算，所以比較不會耗那麼多效能

[janlin002]

我這邊的理解:

• computed 最大特點是必須回傳一個值，並且會把它緩存起來，當函式裏的依賴改變時，才會重新執行和求值
• watch 會偵測單一個值，當它有變化時就執行。
• methods 只要呼叫它，它就會執行。通常用於點擊事件

watch 與 methods 不會強制要求回傳一個值，它們只需執行動作，不一定要回傳值。

computed 比較像是一個共用變數的感覺，然後透過監聽對象來決定是否重新計算

data(){
    return{
        greeting: '您好！',
        name: 'Jan'
    }
},
computed: {
  greetUserComputed() {
    return `${this.name} ${this.greeting}`
  }
},

watch 跟 computed 很像，不過有以下幾點不同:

1. watch 可傳入參數，第一個參數是更新後的值，第二是舊值。
2. 可以處理非同步工作。

  data(){
    text: 'Hello'
  },
  watch: { 
    myprop: function(newVal, oldVal) { // ===> 第一個參數是更新後的值，第二是舊值。
      console.log('Prop changed: ', newVal, ' | was: ', oldVal)
    }
  }

[yhosutun2490]

本次讀書會主題的回顧Ticket

1. computed 和一般在組件內定義的函式method functions有何不同？
2. 對ref.value取出來重新賦值的資料或非響應式資料作computed，會重新響應計算嗎？
3. computed setter 應該避免少使用嗎？
4. computed 一個陣列或響應式物件，該注意哪些操作原則(tips: Array mutated method)？