V18_Vue的Composition_API的功能清單

接下來的幾篇發文，想要從Vue的官網的API清單，
來整個看一遍Vue的功能，會以Composition API為主
同時會補充與 Options API的對照

參考Vue的官網 API Reference 的說明
https://vuejs.org/api/

在Composition API介紹中

分為

• setup()

• Reactivity: Core

• Reactivity: Utilities

• Reactivity: Advanced

• Lifecycle Hooks

• Dependency Injection

在查看的時候可以透過vue的線上編輯器來測試

Vue SFC Playground
https://play.vuejs.org/

另外還有這個vue的線上編輯器
Vue + Vite on StackBlitz
https://vite.new/vue

先來看一下 Reactivity: Core 的部份

//----------------------------------------

ref()

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

ref() 是綁定的設定
可以對 ref() 的數值value進行讀取及寫回

讀取 count.value
寫回 count.value++ => count.value = count.value + 1

//---------------------------

computed()

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // error

從官網的說明

Takes a getter function and returns a readonly reactive ref object for the returned value from the getter.

回傳唯讀的 reactive ref object

computed() 只能讀取

const plusOne = computed(() => count.value + 1)

可以看作是要執行一個計算 () => count.value + 1
結果回傳給 plusOne.value

所以 plusOne.value++ 會變成錯誤的語法

若要轉換成可以讀寫的 computed()
要在 computed() 中 加上 get: 及 set:
如下寫法

const count = ref(1)

const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

console.log(plusOne.value) // 2 
console.log(count.value) // 1
plusOne.value = 1 
console.log(count.value) // 0

plusOne.value 這是讀取，可看作是 plusOne.get()，回傳值是 2
這時 count.value 仍是1

plusOne.value = 1 這是寫入，可看作是 plusOne.set(1)，val是1
就是 count.value = 1 - 1 ＝ 0

這時 count.value 就變成 0

不過這個案例看起來，像是在處理count.value數值一般

plusOne.value => plusOne.get() => count.value + 1
plusOne.value = val => plusOne.set(val) => count.value = val - 1

//-------------------------------

reactive()

官網的說明是

Returns a reactive proxy of the object.

reactive() 與 ref() 很容易混淆

const count = ref(1) => count.value
const obj = reactive({ count: 0 })  => obj.count

const count = ref(1)
console.log(count);   //  是一個 RefImpl 
console.log(count.value);   //  1

const count1 = ref([1])
console.log(count1);   //  是一個 RefImpl 
console.log(count1.value);   // Proxy(Array)

const count2 = ref({ count: 0 })
console.log(count2);   //  是一個 RefImpl 
console.log(count2.value);   // Proxy(Object)

const obj1 = reactive([1]) 
console.log(obj1);   //  Proxy(Array)
console.log(obj1[0]);   // 1

const obj2 = reactive({ count: 0 }) 
console.log(obj2);   //  Proxy(Object)
console.log(obj2.count);   // 0

以上透過直接在 Vue SFC Playground 測試
再用 console.log() 顯示 物件的類型

發現 ref() 是 RefImpl，RefImpl 需要用 value 讀取 ref() 的原數值或物件
reactive() 是 Proxy，是可以顏取物件

ref() => RefImpl 
ref(1).value => 1
ref([1]).value => Proxy(Array)
ref({ count: 0 }).value => Proxy(Object)

//---------------------------------------

readonly()

const original = reactive({ count: 0 })

const copy = readonly(original)  //-- 將 original 轉換成唯讀 readonly(original)

watchEffect(() => {
  console.log(copy.count)  //-- 設定watchEffect(）當 copy.count有變動時就會觸發watchEffect()
})

original.count++  //-- original 可以寫回

copy.count++ //-- 錯誤  copy是唯讀，不可寫回

//-------------------------------------

watchEffect() 與 watch()

const count = ref(0)
watchEffect(() => console.log(count.value))
count.value++  //-- logs 0

這個 watchEffect()，在執行 const count = ref(0) ，就會觸發 watchEffect()
count.value++ 會再觸發一次

const count = ref(0)
watch(count, () => console.log(count.value))
count.value++  //-- logs 0

這個 watch()，在執行 const count = ref(0) ，不會觸發 watch()
count.value++ 才會觸發watch()

整理一下目前研究到現在，感覺整個vue的重點就是 ref，reactive，watch 參照綁定，監看變動，即時反應，