接下來的幾篇發文,想要從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 的部份
//----------------------------------------
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
//---------------------------
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
//-------------------------------
官網的說明是
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)
//---------------------------------------
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是唯讀,不可寫回
//-------------------------------------
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
參照綁定,監看變動,即時反應,