iT邦幫忙

2023 iThome 鐵人賽

DAY 18
0
Vue.js

業主說給你30天學會Vue系列 第 18

V18_Vue的Composition_API的功能清單

  • 分享至 

  • xImage
  •  

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/

https://ithelp.ithome.com.tw/upload/images/20231002/20152098I6nDwD5yKq.png

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

https://ithelp.ithome.com.tw/upload/images/20231002/20152098RcDVVg49Mt.png

先來看一下 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 參照綁定,監看變動,即時反應,


上一篇
V17_Vue的不同語法的對照Composition_API及Options_API
下一篇
V19_從Vue的範例做中學(3)_CRUD
系列文
業主說給你30天學會Vue31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言