本篇要解決的問題
Vue.js 3 問世以後,幾乎社團或是相關文章就一直冒出來,現在的版本也到 3.1.x,覺得可以來看一下文件了。結果很驚人的是直接就說不支援 IE 耶,有點困擾,因為公司的專案,還是會遇到「客戶說 IE 跑版」的狀況。
但最近看見社團上有人提到 Vue 3 有一個 Composition API 很好用,就去翻了一下文件,發現文件看完似懂非懂,可以知道的是 Composition API 能拿來重複使用寫過的 code,比方可以把調用某支 API 的 JS code 寫成 JS 檔後,直接 import 到 .vue 檔裡,就不用每次都重複寫。
本篇是學習 Vue Composition API 的一個筆記整理,因為文件沒全看懂,所以又去 Youtube 上找了教學,找到了之前推薦過的 The Net Ninja 的影片,真的是深入淺出,把原本 Vue 2 用的 Options API,一步步的轉成 Composition API,這樣比照之下,確實看比較懂。
二部影片的連結在這:
本篇就是這二部教學影片的重點整理。
Ref
ref
就是 Vue 2 時的 data
。
在 Vue 2 時我們會這樣寫:
data: { msg: 'Hello World' }
到了 Vue 3 Composition API 就會寫成:
setup() { const msg = ref('Hello World'); return { msg } }
如果 console.log(msg)
來看,會看見 Composition API 的 ref 是一個 Object:
如果想要改變 msg
的值,要改變的是它的 value
:
msg.value = 'Hello Lets write'
一開始在讀文件時,一直搞不懂為什麼要用 ref
,不會跟 Vue 2 的 ref
重覆嗎?
後來看到影片的試範,把 msg
也當作 ref
來使用,就懂了他想說的意思。
對,真的可以像 Vue 2 的 ref
一樣來用:
ref
除了可以當值來用,也可以當作一個 Vue 節點。
最後影片中有說明了一大串 ref
、reactive
的分別,後來是 Google 到一個 stackoverflow 上的解答才比較懂什麼時候用哪一個比較合適:ref vs reactive in Vue 3?
Props
Vue 2 時我們會藉由 Props
來傳值給子組件,Vue 3 Composition API 也可以接 Props
的值。
使用 Component 的 HTML 如下:
<HelloWorld title="Hello World"/>
在 HelloWorld.vue 的組件中就可以這樣接 Props
的值:
export default { props: ['title'], setup(props) { const title = props.title; console.log(title); // Hello World } }
也可以把 Props
轉為 Ref
:
import { toRef } from 'vue' export default { props: ['title'], setup(props) { const title = toRef(props, 'title'); console.log(title.value); // Hello World } }
watch、watchEffect、stop
watch
,一次就是偵聽一個數據,但可以知道這個數據的舊值跟新值。
watchEffect
,一次偵聽所有的數據,但只能偵聽到新值。
如果要停止 watch、watchEffect,如下:
const search = ref(''); const stopWatch = watch(search, (newValue, oldValue) => { console.log('watch search', newValue, oldValue) }) const stopWatchEffect = watchEffect(() => { console.log('watchEffect', search.value) }) setTimeout(() => { stopWatch(); stopWatchEffect(); }, 5000)
生命週期
就像 Vue 2 我們會寫 created
、mounted
一樣,Composition API 也可以寫在每個生命週期內要執行的動作。
import { onMounted, onUpdated } from 'vue' export default { name: 'HelloWorld', setup() { onMounted(() => console.log('Mounted')); onUpdated(() => console.log('Updated')); // ... } }
官方文件中有說明 Composition API 中的生命週期有哪些:
Options API | Hook inside setup |
---|---|
beforeCreate | 無 |
created | 無 |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted |
errorCaptured | onErrorCaptured |
renderTracked | onRenderTracked |
renderTriggered | onRenderTriggered |
activated | onActivated |
deactivated | onDeactivated |