vue2 和 vue3 區(qū)別理解

一宵膨、vue3?的理解和區(qū)別

1迁酸、性能優(yōu)化

雙向響應(yīng)原理由Object.defineProperty改為基于ES6的Proxy,使其顆粒度更大瓜客,速度更快胎挎,且消除了之前存在的警告、重寫了 Vdom 忆家,使其突破了 Vdom 的性能瓶頸、進行了模板編譯的優(yōu)化德迹、進行了更加高效的組件初始化

Tree-Shaking 的支持

支持了tree-shaking(剪枝):像修剪樹葉一樣把不需要的東西給修剪掉芽卿,使 Vue3 的體積更小。

需要的模塊才會打入到包里胳搞,優(yōu)化后的 Vue3.0 的打包體積只有原來的一半(13kb)卸例。哪怕把所有的功能都引入進來也只有23kb称杨,依然比 Vue2.x 更小。像keep-alive筷转、transition甚至v-for等功能都可以按需引入姑原。

Composition API

composition-api是一個 Vue3 中新增的功能,它的靈感來自于React Hooks呜舒,是比mixin更強大的存在锭汛。

composition-api可以提高代碼邏輯的可復(fù)用性,從而實現(xiàn)與模板的無關(guān)性袭蝗;同時使代碼的可壓縮性更強唤殴。另外,把Reactivity模塊獨立開來到腥,意味著 Vue3.0 的響應(yīng)式模塊可以與其他框架相組合朵逝。composition-api把復(fù)雜組件的邏輯抽地更緊湊,而且可以將公共邏輯進行抽取乡范。

Fragments

不再限制template只有一個根節(jié)點配名。

render函數(shù)也可以返回數(shù)組了,有點像React.Fragments

Better TypeScript Support

更好的類型推導(dǎo)晋辆,使得 Vue3 把TypeScript支持得非常好

Custom Renderer API

實現(xiàn)用DOM的方式進行WebGL編程

二渠脉、vue2?和3?的區(qū)別

1、默認進行懶觀察(lazy observation)

在 2.x 版本里栈拖,不管數(shù)據(jù)多大连舍,都會在一開始就為其創(chuàng)建觀察者。當數(shù)據(jù)很大時涩哟,這可能會在頁面載入時造成明顯的性能壓力索赏。3.x 版本,只會對「被用于渲染初始可見部分的數(shù)據(jù)」創(chuàng)建觀察者贴彼,而且 3.x 的觀察者更高效潜腻。

2、更精準的變更通知器仗。

舉例來說:2.x 版本中融涣,使用 Vue.set 來給對象新增一個屬性時,這個對象的所有 watcher 都會重新運行精钮;3.x 版本中威鹿,只有依賴那個屬性的 watcher 才會重新運行。3.轨香、新加入了 TypeScript 以及 PWA 的支持

3忽你、vue2和vue3雙向數(shù)據(jù)綁定原理發(fā)生了改變

vue2 的雙向數(shù)據(jù)綁定是利用ES5 的一個 API Object.definePropert()對數(shù)據(jù)進行劫持 結(jié)合 發(fā)布訂閱模式的方式來實現(xiàn)的。

vue3 中使用了 es6 的 ProxyAPI 對數(shù)據(jù)代理臂容。

相比于vue2.x科雳,使用proxy的優(yōu)勢如下

defineProperty只能監(jiān)聽某個屬性根蟹,不能對全對象監(jiān)聽

可以省去for in、閉包等內(nèi)容來提升效率(直接綁定整個對象即可)

可以監(jiān)聽數(shù)組糟秘,不用再去單獨的對數(shù)組做特異性操作 vue3.x可以檢測到數(shù)組內(nèi)部數(shù)據(jù)的變化

4简逮、LifeCycle(Hooks) 3.0當中的生命周期與2.0的生命周期出現(xiàn)了很大的不同:

  beforeCreate -> 請使用 setup()

  created -> 請使用 setup()

  beforeMount -> onBeforeMount

  mounted -> onMounted

  beforeUpdate -> onBeforeUpdate

  updated -> onUpdated

  beforeDestroy -> onBeforeUnmount

  destroyed -> onUnmounted

  errorCaptured -> onErrorCaptured

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市尿赚,隨后出現(xiàn)的幾起案子散庶,更是在濱河造成了極大的恐慌,老刑警劉巖吼畏,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件督赤,死亡現(xiàn)場離奇詭異,居然都是意外死亡泻蚊,警方通過查閱死者的電腦和手機躲舌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來性雄,“玉大人没卸,你說我怎么就攤上這事∶胄” “怎么了约计?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長迁筛。 經(jīng)常有香客問我煤蚌,道長,這世上最難降的妖魔是什么细卧? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任尉桩,我火速辦了婚禮,結(jié)果婚禮上贪庙,老公的妹妹穿的比我還像新娘蜘犁。我一直安慰自己,他們只是感情好止邮,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布这橙。 她就那樣靜靜地躺著,像睡著了一般导披。 火紅的嫁衣襯著肌膚如雪屈扎。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天撩匕,我揣著相機與錄音助隧,去河邊找鬼。 笑死,一個胖子當著我的面吹牛并村,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播滓技,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼哩牍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了令漂?” 一聲冷哼從身側(cè)響起膝昆,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎叠必,沒想到半個月后荚孵,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡纬朝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年收叶,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片共苛。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡判没,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出隅茎,到底是詐尸還是另有隱情澄峰,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布辟犀,位于F島的核電站俏竞,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏堂竟。R本人自食惡果不足惜魂毁,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望跃捣。 院中可真熱鬧漱牵,春花似錦、人聲如沸疚漆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽娶聘。三九已至闻镶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間丸升,已是汗流浹背铆农。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留狡耻,地道東北人墩剖。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓猴凹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親岭皂。 傳聞我的和親對象是個殘疾皇子郊霎,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容