作爲前端開發者，這幾天想必大家都看到了Vue3.0的beta版新聞了，是的，尤大大在4.17號微博曬出了Vue3.0的beta鏈接，不少FEer開始興奮，不過也有不少其它聲音：『我學不動了』、『這不就是React』、『啥時候出正式版』；
Vue3.0-beta鏈接：https://github.com/vuejs/vue-next#status-beta
Vue3.0設計目標
-
更小
-
全局 API 和內置組件 / 功能支持 tree-shaking
-
常駐的代碼尺寸控制在 10kb gzipped 上下
-
-
更快
-
基於 Proxy 的變動偵測，性能整體優於 getter / setter
-
Virtual 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 API
-
ref API
-
watch API變化
-
computed API變化
-
生命週期鉤子變化（參考上面）
-
TypeScript和JSX支持（暫時忽略）
reactive
作用：創建響應式對象，非包裝對象，類似於在2.0的data中聲明變量。
它本身一種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('河畔一角');//如果需要修改值，可通過valueuser.value = '河畔老師'return { title ,user }}}</script><style>#app {text-align: center;color: #2c3e50;margin-top: 60px;}</style>
效果圖如下：
事件處理
既然不用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 = ()=>{//如果需要修改值，可通過valueuser.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('河畔一角');//如果需要修改值，可通過valueconst updateUser = ()=>{user.value = '河畔老師'}//生命週期方法onMounted(()=>{console.log('init mounted...')})// 初始化count值const count = ref(0);const increment = ()=>{count.value++}// 調用計算屬性函數Hookconst 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/
尤大4.21直播回放地址：
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文檔會有詳細介紹。