綱要
Vue3.0在去年2020年9月的時候正式發布,但這次的大改版是向下兼容的,Vue.js 開發團隊在盡量不變動 API 的前提下,對 Vue.js 進行了底層核心的重構,針對過去2.0中幾個明顯缺點進行了重大的改進,並在此基礎上添加了一些更好用的新功能。
所以你同樣可以在Vue3.0中寫2.0的語法,初次接觸的人也不必煩惱「現在應該學習 Vue 2 或者 Vue 3」,直接從3.0起手是沒有問題的!
Lifecycle Hooks的變動示意圖:
原則上和2.x版的差別不大,但使用了createWebHashHistory
取代以往的mode: hash
由上頭的範例22行中我們可以看到,定義v-model時,ref 回傳的會是一個reference。
也就是說你必須指定底下的value
才取到正確的值。
但 reactive 卻是完完整整的將定義後的值顯示出來,乍看下好像 reactive 比較方便,不必寫成refVariable.value
才能取值,但實際上這兩種方法有各自不同的適用狀況。
假如你有一個 Watch 偵聽事件,可以試試看這個例子:
最後的結果應該只會看到reactive
的log:
ref 不會對Object或Array內部的屬性變動做偵聽,而 reactive 正好相反
父組件用來定義給予子組件資料的方式不只是props。可以在父組件上設置一組Provide,於子組件中使用Inject將資料取回。
以往使用prop傳遞時,假如子組件中又有其他的子組件時,這個prop資料就需要再被中間的所有組件重新傳遞一次,而Inject則能簡化這件事。
我們用一個透過取得的json內容設為provide,更改子組件Inject後的例子來說明用法。
完整範例:https://github.com/fortes1219/2021_vue3
製作一個命名為config.json
的JSON檔案放置於public下,稍後用異步處理Fetch內容,大概是長這樣:
public/config.json
接下來需要import父組件中使用的provide
views/Provide.vue
再新增第一個子組件內容,引入layer2:
Child_inject.vue
Child_inject_layer2.vue
Child_inject_layer3.vue
切換到provide的路由應該會看到這個畫面,第一層的子組件預設文字是old text
第二層後的子組件2和子組件3預設沒有任何參數,會是undefined
按下Re Render按鈕後就會看到父組件的provide資料一路繼承給不同階層的後代組件去:
(待補)
VueJS
Vue3