最近部門開展了新同事的前端開發統一培訓（后期還接着有后端培訓、雲計算培訓，部門所有新人都要掌握~太難了），選了vue.js作為講解，這里我自己找了博客進行提前了解。
前言
- 版本換代需要我們花更多的時間適應學習，但升級是為了更好，讓你的前端項目更快更好更緊跟前端時代。
vue2.0核心思想
- Vue.js是一個提供MVVM數據雙向綁定的庫，專注於UI層面，核心思想是：數據驅動、組件系統。
數據驅動：
- Vue.js數據觀測原理在技術實現上，利用的是
ES5Object.defineProperty和存儲器屬性:getter和setter（所以只兼容IE9及以上版本），可稱為基於依賴收集的觀測機制。核心是VM，即ViewModel，保證數據和視圖的一致性。
watcher - watcher：每一個指令都會有一個對應的用來觀測數據的對象，叫做
watcher，比如v-text="msg", {{ msg }}，即為兩個watcher，watcher對象中包含了待渲染的關聯DOM元素。
基於依賴收集的觀測機制原理： - 1、將原生的數據改造成 “可觀察對象”，通常為，調用
defineProperty改變data對象中數據為存儲器屬性。一個可觀察對象可以被取值getter，也可以被賦值setter。 - 2 、在解析模板，也就是在
watcher的求值過程中，每一個被取值的可觀察對象都會將當前的watcher注冊為自己的一個訂閱者，並成為當前watcher的一個依賴。 - 3、當一個被依賴的可觀察對象被賦值時，它會通知
notify所有訂閱自己的watcher重新求值，並觸發相應的更新，即watcher對象中關聯的DOM改變渲染。
組件系統：
- 應用類UI可以看作全部是由組件樹構成的。
核心選項 - 1、Template（模板）聲明了數據和最終展現給用戶的DOM之間的映射關系。
- 2、data（初始數據)
- 3、props(接受的外部參數)
- 4、methods（方法）
- 5、lifecycle hooks（生命周期鈎子函數）
- 6、assets（私有資源）
最核心最優秀的來了
- vue2.0為何可以從ag、react中殺出來，因為vue2.0允許將模板、樣式、邏輯三要素整合在同一個文件中，以.vue文件后綴形成單文件組件格式，方便項目架構和開發引用。配以完善的中文文檔，這簡直太友善了，符合國內大多數前端開發的使用習慣。
為何要升級呢？已經如此優秀了鴨？
- 答案是： 因為有react優秀在前，如果vue2.0不能跟上這個優秀的框架還固步自封的話，必將沒落。
Vue2.0的缺點是他的敵人比他更加優秀。
- 性能比react低。（低在dom渲染上，低在watcher的監聽不如react設計得高效）
- 打包文件沒有react輕簡。
- 對未來必然流行的TS沒有react支持得好
- 等等等各方面都開始被react領跑，這就是為啥尤一要開發3.0的原因。
Vue3.0的核心思想
- 你們可以去看看B站的尤一的一手視頻，免得被轉換。英文不好的我給你們找好了對應翻譯的帖子。
視頻地址 https://www.bilibili.com/video/av837839066/
視頻文字輔助 https://juejin.cn/post/6844904134303301645
對比vue2.0的區別
- 1、性能更比Vue 2.0強。
- 2、打包更科學不再打包沒用到的模塊
- 3、Composition API（組合API）
- 4、Fragment, Teleport, Suspense
- 5、更友好的支持兼容TS
- 6、Custom Renderer API（自定義渲染API）
我會挑幾個講一下，反正都是只知皮毛，各位可以自行深度學習。
Composition API
- 英文好的同學可以去瞅瞅 composition-api.vuejs.org/#summary
Fragment（碎片）
- 你不用再必須用一個template標簽包起整個組件，一個文本一個標簽，多個tempate都可以。
Teleport（傳送門）
- 對標的是React的 Portal，有興趣的可以去了解一下。
https://www.jianshu.com/p/16d5cf2e48cf - 但因為Chrome有個提案，會增加一個名為Portal的原生element，為避免命名沖突，改為Teleport
- 想知道什么是teleport的可以查看這個文章，我選出來的比較淺顯易懂的。https://www.jianshu.com/p/1ecf5006b1ae
Suspense(懸念)
- 可在嵌套層級中等待嵌套的異步依賴項
- 支持
async setup() - 支持異步組件
Custom Renderer API
- 正在進行
NativeScript Vue集成 - 用戶可以嘗試
WebGL自定義渲染器，與普通Vue應用程序一起使用（Vugel）。
意味着以后可以通過 vue， Dom 編程的方式來進行 webgl 編程 。感興趣可以看這里：Getting started vugel
Vuex Router Cli
- Vuex: 都別慌，尤一說了，Vuex的下一個版本目前還放不出來，vue3.0以目前的API為主去適配，所以暫時不會改動很大。
- Router: 適應vue3的已經出來了，后續我也得去跟進學習下，項目里已經用了，但是改版的區別沒仔細分析。
- Cli 很超前的做了vue3的工作，目前項目可以直接用cli創建，非常感謝這些團隊給我們這些小白減低了很大的學習難度