圖片來自網路

作為前端開發者，這幾天想必大家都看到了Vue3.0的beta版新聞了，是的，尤大大在4.17號微博晒出了Vue3.0的beta連結，不少FEer開始興奮，不過也有不少其它聲音：『我學不動了』、『這不就是React』、『啥時候出正式版』；

就在昨晚關於Vue3.0-beta尤大佬也現場直播聊聊他有哪些新特性，咱們一起回顧回顧：

Vue3.0-beta連結：https://github.com/vuejs/vue-next#status-beta

那麼首先，我們先簡單看一下Vue釋出版本的過程：Alpha - Beta - RC - 正式

所以，從截圖來看，還會經歷RC階段才會有正式版本能用，大家不要過於著急，目前尤大正在全力開發配套基礎功能，比如腳手架、vue-router、以及生態外掛等；

Vue3.0設計目標更小全域性 API 和內建元件 / 功能支援 tree-shaking常駐的程式碼尺寸控制在 10kb gzipped 上下更快基於 Proxy 的變動偵測，效能整體優於 getter / setterVirtual DOM 重構編譯器架構重構，更多的編譯時優化加強API設計一致性加強TypeScript支援提高自身可維護性程式碼採用 monorepo 結構，內部分層更清晰TypeScript 使得外部貢獻者更有信心做改動開放更多底層功能

對於我們開發者來講，最關心的還是它的用法，實際上這塊變化非常大。雖然目前是beta版本，但我們依然可以嚐鮮，在本地建立Vue專案，並做一做Demo；

一、建立專案

// 先升級vue-cli到4.x版本cnpm install -g @vue/cli// 通過腳手架建立專案，一路回車vue create vue3.0

注：這一步實際上用的依然是2.x的版本

二、升級2.6到3.0beta版本

// 安裝完vue/cli以後，可以使用vue add新增外掛// 目前3.0對應的是vue-next專案vue add vue-next

安裝完vue-next以後，我們就發現本地專案已經升級到了3.0. 開啟main.js如圖：

左側目錄結構沒有太大變化，main的語法卻大不一樣了；

前面我們提到Vue3.0更小，因為它支援Tree-Shaking，可以把每一個用到的API都抽取出來，通過上圖我們發現，可以只解構出一個createApp函式，相比2.0簡化了很多。

三、LifeCycle介紹(Hooks)

Vue3.0中，生命週期方法已經發生了很大變化，接下來我們對比一下：

四、Composition API介紹

實際上，起初定義的是Vue-Function-API，後經過社群意見收集，更名為Vue-Composition-API.

接下來，我們介紹幾個變化大的Composition API：

reactive APIref APIwatch API變化computed API變化生命週期鉤子變化（參考上面）TypeScript和JSX支援（暫時忽略）reactive

作用：建立響應式物件，非包裝物件，可以認為是模板中的狀態。

它本身一種Hooks能力，用過React Hook的，實際上就等同於useState();大家估計很好奇，為什麼叫reactive? 讓人莫名有一種你再抄襲React的感覺！

接下來，上硬菜：

// 開啟 App.vue，刪除多餘程式碼<template> <div id="app"> <h1>{{title.name}}</h1> </div> <div> // 此處可並列多個div，不再要求一個根元素了 </div></template><script>import { reactive } from 'vue'export default { name: 'App', setup(){ const title = reactive({ name:'歡迎學習Vue3.0' }) return { title } }}</script><style>#app { text-align: center; color: #2c3e50; margin-top: 60px;}</style>

頁面效果圖：

Ref

作用：建立一個包裝式物件，含有一個響應式屬性value。

它和reactive的差別，就是前者沒有包裝屬性value

接下來，上硬菜：

<template> <div id="app"> <h1>{{title.name}}</h1> <div>{{user}}</div> </div></template><script>import { reactive,ref } from 'vue'export default { name: 'App', setup(){ const title = reactive({ name:'歡迎學習Vue3.0' }) const user = ref('河畔一角'); //必須通過value賦值，且模板中直接使用user user.value = '河畔老師' return { title ,user } }}</script><style>#app { text-align: center; color: #2c3e50; margin-top: 60px;}</style>

效果圖如下：

事件處理

實際上這個地方有一些小誤區，Vue3.0依然可以繼續使用2.x的語法，data、methods、mounted依然可以使用，我們這兒主要針對Composition API做講解，可以翻譯成新增的組合API.

如果不用methods，那事件處理該怎麼呼叫方法？

上硬菜：

<template> <div id="app"> <h1>{{title.name}}</h1> <div>{{user}}</div> <button @click="updateUser">修改名稱</button> </div></template><script>import { reactive,ref } from 'vue'export default { name: 'App', setup(){ const title = reactive({ name:'歡迎學習Vue3.0' }) const user = ref('河畔一角'); const updateUser = ()=>{ //如果需要修改值，可通過value user.value = '河畔老師' } return { title , user, updateUser } }}</script><style>#app { text-align: center; color: #2c3e50; margin-top: 60px;}</style>

效果圖：

onMounted/computed

作用：新周期函式和新計算函式

上硬菜：

<template> <div id="app"> <h1>{{title.name}}</h1> <div>{{user}}</div> <button @click="updateUser">修改名稱</button> <div>當前count：{{computedCount}}</div> <button @click="increment">修改count</button> </div></template><script>import { reactive,ref,onMounted,computed } from 'vue'export default { name: 'App', setup(){ const title = reactive({ name:'歡迎學習Vue3.0' }) const user = ref('河畔一角'); //如果需要修改值，可通過value const updateUser = ()=>{ user.value = '河畔老師' } //生命週期方法 onMounted(()=>{ console.log('init mounted...') }) // 初始化count值 const count = ref(0); const increment = ()=>{ count.value++ } // 呼叫計算屬性函式Hook const computedCount=computed(()=>count.value*10) return { title , user, updateUser,count,increment,computedCount } }}</script><style>#app { text-align: center; color: #2c3e50; margin-top: 60px;}</style>

效果圖：

經過以上幾個API講解，相信大家開始越來越激動了，語法新穎，簡潔凝鍊，但大家需要有一個過渡期，剛開始肯定會很陌生；

實際上用法遠不止這些，包括父子傳遞、支援jsx語法等，我們這兒不做一一介紹了，大家可以自己通過第三方資料整理，了解更多Vue3.0的語法；

給大家提供幾個官網的API文件：

https://composition-api.vuejs.org/#summary

https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

尤大直播回放地址：

https://live.bilibili.com/record/R14x411c7rW

上述原始碼已經上傳Github: https://github.com/JackySoft/vue3.0-demo

溫馨提示：目前Vue3.0是會相容大部分2.x的語法，實際上主要的變化，在上面的Vue3.0設計目標裡面已經列出，我們主要的學習成本可能就在Composition API這塊，新增了很多組合API，它本身不依賴this指標，方便我們對邏輯做抽取封裝。

不知道大家是否能看懂這個圖！我上面提到的API文件會有詳細介紹。