目錄
Vue3.0的進度
7月18號，尤弟宣布首個 Vue 3 RC 發(fā)布：
RC 即預發(fā)布版。這意味著 Vue3 內(nèi)核的 API 和實現(xiàn)已到達穩(wěn)定狀態(tài)，在最終版本發(fā)布前，不會提出新功能或者做重大更改?？磥砭嚯x Vue3.0 正式版與我們見面已經(jīng)不遠了！
那么本篇文章，就帶大家來了解一下 Vue3 ，體驗一下它的新特性。
Vue3.0新特性
-
性能
- 雙向響應原理由
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可以提高代碼邏輯的可復用性，從而實現(xiàn)與模板的無關性；同時使代碼的可壓縮性更強。另外，把Reactivity模塊獨立開來，意味著 Vue3.0 的響應式模塊可以與其他框架相組合。composition-api的優(yōu)越性.png
如上圖，composition-api把復雜組件的邏輯抽地更緊湊，而且可以將公共邏輯進行抽取。 Fragments
不再限制template只有一個根節(jié)點。
render函數(shù)也可以返回數(shù)組了，有點像React.FragmentsBetter TypeScript Support
更好的類型推導，使得 Vue3 把TypeScript支持得非常好Custom Renderer API
實現(xiàn)用DOM的方式進行WebGL編程
體驗Vue3.0
初始化項目
-
使用腳手架創(chuàng)建項目
vue create my-Project -
安裝
composition-api，體驗新特性npm i @vue/composition-api -s -
使用插件
// main.js import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI)
Setup函數(shù)
setup()函數(shù)是Vue3.0中，專門為組件提供的新屬性。它為基于Composition API的新特性提供了統(tǒng)一的入口。
在Vue3中，定義
methods、watch、computed、data數(shù)據(jù)都放在了setup()函數(shù)中
1. 執(zhí)行時機
setup()函數(shù)會在created()生命周期之前執(zhí)行。
2. 接收props數(shù)據(jù)
props是setup()函數(shù)的一個形參，組件接收的props數(shù)據(jù)可以在setup()函數(shù)內(nèi)訪問到。
setup(props) {
console.log(props.p1)
}
3. context上下文對象
context 是 setup() 的第二個形參，它是一個上下文對象，可以通過 context 來訪問Vue的實例 this 。
setup(props,context) {
console.log(this)
console.log(context)
}
注意：在
setup()函數(shù)中訪問不到Vue的this實例
4. 體驗 Composition-Api
具體的 Vue3 的體驗在第二章節(jié)：Vue3 的新特性（二） —— Composition-Api
