前言
官網(wǎng)地址：https://staging-cn.vuejs.org/
vue最新版分為兩個(gè)版本： Vue3.0（20年9月18日） Vue 3.2 （21年8月10日）
#Vue 3.2 +Vite+volar
Vue3 框架做了大量的性能優(yōu)化，包括虛擬 DOM，編譯模板、代理的新數(shù)據(jù)監(jiān)聽(tīng)，體積更小的打包文件等。
新的組合式 API （composition-api），更適合大型項(xiàng)目的構(gòu)建，去除繁瑣的 this 操作；
由于是基于 TypeScript 編寫，對(duì) TypeScript 原生支持更好，更強(qiáng)大的智能類型推導(dǎo)功能；
生命周期的一些改變，vue2 中的 beforeCreate 和 created 被一個(gè)新增的 setup 生命周期函數(shù)代替；
一些常見(jiàn) API 如 v-model 的變化，支持對(duì)一個(gè)組件同時(shí)進(jìn)行多個(gè) v-model 的數(shù)據(jù)綁定。
vscode 的插件 vetur 對(duì)vue3 的composition API語(yǔ)法支持度非常弱，所以開(kāi)發(fā)vue3項(xiàng)目需要將vetur禁用 更換另一個(gè)插件
開(kāi)發(fā)vue3安裝并使用： volar 插件
#1.項(xiàng)目創(chuàng)建
Vite 官網(wǎng)：https://cn.vitejs.dev/
yarn create vite my-vue-app –template vue
#2.SFC 單文件組件
html 部分變化不大
vue2的 template 中只能有一個(gè)子節(jié)點(diǎn)，vue3的 template 中可以寫多個(gè)子節(jié)點(diǎn)
js 部分內(nèi)置ts，但是vite創(chuàng)建的項(xiàng)目沒(méi)有開(kāi)啟 ， .box{ width: 100px; height: 100px; background: v-bind(color);}
#2. setup語(yǔ)法糖
起初 Vue3.0 暴露變量必須 return 出來(lái)，template中才能使用； 這樣會(huì)導(dǎo)致在頁(yè)面上變量會(huì)出現(xiàn)很多次。
vue3.2只需在script標(biāo)簽中添加setup,可以幫助我們解決這個(gè)問(wèn)題。
1.組件只需引入不用注冊(cè)，屬性和方法也不用返回， 也不用寫setup函數(shù)，也不用寫export default ， 甚至是自定義指令也可以在我們的template中自動(dòng)獲得。
#3.data 定義
#3.1 直接定義 無(wú)響應(yīng)式
{{name}}
#3.2 ref 定義基本數(shù)據(jù)類型 有響應(yīng)式
{{name}}
修改數(shù)據(jù)
#3.3 reactvie 定義引用數(shù)據(jù)類型 有響應(yīng)式
{{user.name}}
新增屬性
#4.methods 方法定義
{{user.age}}
年齡+
#5.computed 計(jì)算屬性
#6.watch 使用
watch(監(jiān)聽(tīng)數(shù)據(jù)源,執(zhí)行函數(shù),[配置參數(shù)]) //配置參數(shù)： 立即執(zhí)行 深度監(jiān)聽(tīng){immediate: true, deep: true }
#6.1 監(jiān)聽(tīng)基本數(shù)據(jù)類型單一數(shù)據(jù)源
#6.2 監(jiān)聽(tīng)引用數(shù)據(jù)類型單一數(shù)據(jù)源
#6.3 監(jiān)聽(tīng)引用數(shù)據(jù)類型 多數(shù)據(jù)源[深度監(jiān)聽(tīng)]
添加隨機(jī)數(shù) {{ item }}
#7.生命周期
vue2 | vue3.0 | vue3.2 | 備注 |
beforeCreate | setup | 組件創(chuàng)建之前 可以獲取頂級(jí)實(shí)例對(duì)象 | |
created | setup | 組件創(chuàng)建完成，可以獲取變量 | |
beforeMount | onBeforeMount | 掛載前，VNdom創(chuàng)建完成，真實(shí)dom未渲染 | |
mounted | onMounted | 掛載完成，真實(shí)dom創(chuàng)建完成，可以獲取dom | |
beforeUpdate | onBeforeUpdate | dom更新前觸發(fā) | |
updated | onUpdated | dom更新完成觸發(fā) | |
beforedestroy，destroyed | beforeUnmount | onBeforeUnmount | 組件卸載后觸發(fā) 所有的掛載的數(shù)據(jù) 子組件全部卸載后觸發(fā) |
errorCaptured | onErrorCaptured | 在捕獲一個(gè)來(lái)自后代組件的錯(cuò)誤時(shí)被調(diào)用 | |
renderTracked | onRenderTracked | 跟蹤虛擬 DOM 重新渲染時(shí)調(diào)用 | |
renderTriggered | onRenderTriggered | 當(dāng)虛擬 DOM 重新渲染被觸發(fā)時(shí)調(diào)用 | |
activated | activated | onActivated | 緩存組件激活時(shí)調(diào)用 |
deactivated | deactivated | onDeactivated | 緩存組件失活時(shí)調(diào)用 |
#8.組件使用
- 創(chuàng)建 src/components/Son.vue
- App.vue中導(dǎo)入并使用該組件
- vue3.2 中當(dāng)我們導(dǎo)入子組件時(shí)，setup語(yǔ)法糖會(huì)自動(dòng)去注冊(cè)該組件，所以注冊(cè)語(yǔ)句不用寫了。
#9.組件通信
#9.1 父?jìng)髯?defineProps
- 父組件
- 子組件
#9.2 子傳父 defineEmits
- 子組件
傳遞數(shù)據(jù)
- 父組件
