如何快速上手Vue3?下面本篇文章給大家對(duì)比一下Vue2和Vue3,并介紹一下Vue2開(kāi)發(fā)者如何快速上手Vue3,希望對(duì)大家有所幫助!
筆者之前是Vue2+React開(kāi)發(fā)者,因項(xiàng)目需要直接上手Vue3,所以快速學(xué)習(xí)一下,中間會(huì)對(duì)比一些和React相關(guān)的區(qū)別。閱讀前提:已經(jīng)上手了Vue2的開(kāi)發(fā)
,本文主要聊的問(wèn)題:
-
Vue3的全新特性
-
Vue2和Vue3的一些區(qū)別
-
Vue2開(kāi)發(fā)者如何快速上手Vue3
-
Vue3和React的簡(jiǎn)單比對(duì)
-
使用Vue3編寫組件庫(kù)
(學(xué)習(xí)視頻分享:vue視頻教程)
Vue2 vs Vue3
1、簡(jiǎn)單點(diǎn)說(shuō)
- Vue2只支持
單節(jié)點(diǎn)
,Vue3 template支持多節(jié)點(diǎn)
,類似react fragments 變化
基本都在script中(Option api -> Composition api)不會(huì)再看見(jiàn)滿屏的this了?。。?/li>- style支持
v-bind
- Proxy代替defineProperty
- defineProperty無(wú)法實(shí)現(xiàn)對(duì)數(shù)組對(duì)象的深層監(jiān)聽(tīng),
Proxy
是瀏覽器最新api,功能更加強(qiáng)大。 - 不再支持IE,Vue2想享受Vue3帶來(lái)的部分更新,可考慮升級(jí)
Vue2.7
版本
- defineProperty無(wú)法實(shí)現(xiàn)對(duì)數(shù)組對(duì)象的深層監(jiān)聽(tīng),
- TypeScript的支持
- Vue2采用的是Facebook的
Flow
,沒(méi)法完美支持TypeScript
(所以項(xiàng)目初期技術(shù)選型很重要) - Vue3 TypeScript
完全重寫
,提供和React一樣的TS支持
- Vue2采用的是Facebook的
- 全新生態(tài)
- 基本還是vue周邊伴隨Vue3升級(jí)那一套,但是狀態(tài)管理推薦,由原來(lái)的Vuex變?yōu)?code>Pina
- 全新的
vite
支持,包括vitest
等,官方提供周邊工具