前言
- 版本換代需要我們花更多的時(shí)間適應(yīng)學(xué)習(xí)掠廓，但升級(jí)是為了更好婆瓜，讓你的前端項(xiàng)目更快更好更緊跟前端時(shí)代啄糙。
vue2.0核心思想
- Vue.js是一個(gè)提供MVVM數(shù)據(jù)雙向綁定的庫(kù)放刨，專(zhuān)注于UI層面工秩，核心思想是：數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)进统。
數(shù)據(jù)驅(qū)動(dòng)：
- Vue.js數(shù)據(jù)觀測(cè)原理在技術(shù)實(shí)現(xiàn)上助币，利用的是
ES5Object.defineProperty和存儲(chǔ)器屬性:getter和setter（所以只兼容IE9及以上版本），可稱(chēng)為基于依賴(lài)收集的觀測(cè)機(jī)制螟碎。核心是VM眉菱，即ViewModel，保證數(shù)據(jù)和視圖的一致性掉分。
watcher -
watcher：每一個(gè)指令都會(huì)有一個(gè)對(duì)應(yīng)的用來(lái)觀測(cè)數(shù)據(jù)的對(duì)象俭缓，叫做
watcher，比如v-text="msg", {{ msg }}酥郭，即為兩個(gè)watcher华坦，watcher對(duì)象中包含了待渲染的關(guān)聯(lián)DOM元素。
基于依賴(lài)收集的觀測(cè)機(jī)制原理： - 1不从、將原生的數(shù)據(jù)改造成 “可觀察對(duì)象”惜姐，通常為，調(diào)用
defineProperty改變data對(duì)象中數(shù)據(jù)為存儲(chǔ)器屬性椿息。一個(gè)可觀察對(duì)象可以被取值getter载弄，也可以被賦值setter耘拇。 - 2 、在解析模板宇攻，也就是在
watcher的求值過(guò)程中惫叛，每一個(gè)被取值的可觀察對(duì)象都會(huì)將當(dāng)前的watcher注冊(cè)為自己的一個(gè)訂閱者，并成為當(dāng)前watcher的一個(gè)依賴(lài)逞刷。 - 3嘉涌、當(dāng)一個(gè)被依賴(lài)的可觀察對(duì)象被賦值時(shí)，它會(huì)通知
notify所有訂閱自己的watcher重新求值夸浅，并觸發(fā)相應(yīng)的更新仑最，即watcher對(duì)象中關(guān)聯(lián)的DOM改變渲染。
組件系統(tǒng)：
- 應(yīng)用類(lèi)UI可以看作全部是由組件樹(shù)構(gòu)成的帆喇。
核心選項(xiàng) - 1警医、Template（模板）聲明了數(shù)據(jù)和最終展現(xiàn)給用戶(hù)的DOM之間的映射關(guān)系。
- 2坯钦、data（初始數(shù)據(jù))
- 3预皇、props(接受的外部參數(shù))
- 4、methods（方法）
- 5婉刀、lifecycle hooks（生命周期鉤子函數(shù)）
- 6吟温、assets（私有資源）
最核心最優(yōu)秀的來(lái)了
- vue2.0為何可以從ag、react中殺出來(lái)突颊，因?yàn)関ue2.0允許將模板鲁豪、樣式、邏輯三要素整合在同一個(gè)文件中律秃，以.vue文件后綴形成單文件組件格式爬橡，方便項(xiàng)目架構(gòu)和開(kāi)發(fā)引用。配以完善的中文文檔棒动，這簡(jiǎn)直太友善了堤尾，符合國(guó)內(nèi)大多數(shù)前端開(kāi)發(fā)的使用習(xí)慣。
為何要升級(jí)呢迁客？已經(jīng)如此優(yōu)秀了鴨？
- 答案是： 因?yàn)橛衦eact優(yōu)秀在前辞槐，如果vue2.0不能跟上這個(gè)優(yōu)秀的框架還固步自封的話(huà)掷漱，必將沒(méi)落。
Vue2.0的缺點(diǎn)是他的敵人比他更加優(yōu)秀榄檬。
- 性能比react低卜范。（低在dom渲染上，低在watcher的監(jiān)聽(tīng)不如react設(shè)計(jì)得高效）
- 打包文件沒(méi)有react輕簡(jiǎn)鹿榜。
- 對(duì)未來(lái)必然流行的TS沒(méi)有react支持得好
- 等等等各方面都開(kāi)始被react領(lǐng)跑海雪，這就是為啥尤一要開(kāi)發(fā)3.0的原因锦爵。
Vue3.0的核心思想
- 你們可以去看看B站的尤一的一手視頻，免得被轉(zhuǎn)換奥裸。英文不好的我給你們找好了對(duì)應(yīng)翻譯的帖子险掀。
視頻地址 https://www.bilibili.com/video/av837839066/
視頻文字輔助 https://juejin.cn/post/6844904134303301645
對(duì)比vue2.0的區(qū)別
- 1、性能更比Vue 2.0強(qiáng)湾宙。
- 2樟氢、打包更科學(xué)不再打包沒(méi)用到的模塊
- 3、Composition API（組合API）
- 4侠鳄、Fragment, Teleport, Suspense
- 5埠啃、更友好的支持兼容TS
- 6、Custom Renderer API（自定義渲染API）
我會(huì)挑幾個(gè)講一下伟恶，反正都是只知皮毛碴开，各位可以自行深度學(xué)習(xí)。
Composition API
- 英文好的同學(xué)可以去瞅瞅 composition-api.vuejs.org/#summary
Fragment（碎片）
- 你不用再必須用一個(gè)template標(biāo)簽包起整個(gè)組件博秫，一個(gè)文本一個(gè)標(biāo)簽潦牛，多個(gè)tempate都可以。
Teleport（傳送門(mén)）
- 對(duì)標(biāo)的是React的 Portal台盯，有興趣的可以去了解一下罢绽。
http://www.reibang.com/p/16d5cf2e48cf - 但因?yàn)镃hrome有個(gè)提案，會(huì)增加一個(gè)名為Portal的原生element静盅，為避免命名沖突良价，改為T(mén)eleport
- 想知道什么是teleport的可以查看這個(gè)文章，我選出來(lái)的比較淺顯易懂的蒿叠。http://www.reibang.com/p/1ecf5006b1ae
Suspense(懸念)
- 可在嵌套層級(jí)中等待嵌套的異步依賴(lài)項(xiàng)
- 支持
async setup() - 支持異步組件
Custom Renderer API
- 正在進(jìn)行
NativeScript Vue集成 - 用戶(hù)可以嘗試
WebGL自定義渲染器明垢，與普通Vue應(yīng)用程序一起使用（Vugel）。
意味著以后可以通過(guò) vue市咽， Dom 編程的方式來(lái)進(jìn)行 webgl 編程 痊银。感興趣可以看這里：Getting started vugel
Vuex Router Cli
- Vuex: 都別慌，尤一說(shuō)了施绎，Vuex的下一個(gè)版本目前還放不出來(lái)溯革，vue3.0以目前的API為主去適配，所以暫時(shí)不會(huì)改動(dòng)很大谷醉。
- Router: 適應(yīng)vue3的已經(jīng)出來(lái)了致稀，后續(xù)我也得去跟進(jìn)學(xué)習(xí)下，項(xiàng)目里已經(jīng)用了俱尼，但是改版的區(qū)別沒(méi)仔細(xì)分析抖单。
- Cli 很超前的做了vue3的工作，目前項(xiàng)目可以直接用cli創(chuàng)建，非常感謝這些團(tuán)隊(duì)給我們這些小白減低了很大的學(xué)習(xí)難度矛绘。
