前言
4月17日，Vue 3.0 beta 正式發佈，Vue 3.0 更新、優化了哪些東西？讓我們一起來了解了解。
正文
Vue 3.0 發佈內容包括：
-
vue: Beta
-
vue-router: Alpha
-
vuex: Alpha
-
vue-class-component: Alpha
-
vue-cli: Experimental support via vue-cli-plugin-vue-next
-
eslint-plugin-vue: Alpha
-
vue-test-utils: Alpha
-
vue-devtools: WIP
-
jsx: WIP
可以看到 Vue 3.0 beta 版本是一個項目系列，包含了我們在開發過程中需要的套件、webpack 插件等等，本文將帶大家快速搭建基於 Vue 3.0 的項目框架，這和之前很多 Vue 3.0 的 Demo 不同，是具備商業化項目能力的框架。
Vue 3.0 基本特性體驗
1.路由
import { createRouter, createWebHashHistory } from 'vue-router';import Home from '../views/Home.vue';const routes = [{ path: '/', name: 'Home', component: Home },{ path: '/test', name: 'Test', component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue') }];const router = createRouter({ history: createWebHashHistory(), routes });export default router;
Vue 3.0路由的用法和之前不一樣了，創建路由也發生了變化，之前採用構造函數的方式，這裏改爲使用 createRouter 來創建 Vue Router 實例，配置的方法基本一致,想知道如何獲取路由？下文繼續閱讀就能知道。
2.事件綁定和狀態
Vue 3.0 中定義狀態的方法改爲類似 React Hooks 的方法，下面我們在 Test.vue 中定義一個狀態 count：
<template><div class="test"><h1>test count: {{count}}</h1></div></template><script>import { ref } from 'vue'export default {setup () {const count = ref(0)return {count}}}</script>
Vue 3.0 中初始化狀態通過 setup 方法，定義狀態需要調用 ref 方法。那麼如何更新狀態以及事件綁定呢？
<template><div class="test"><h1>test count: {{count}}</h1><button @click="add">add</button></div></template><script>import { ref } from 'vue'export default {setup () {const count = ref(0)const add = () => {count.value++}return {count,add}}}</script>
這裏的 add 方法不再需要定義在 methods 中，但注意更新 count 值的時候不能直接使用 count++，而應使用 count.value++，更新代碼後，點擊按鈕，count 的值就會更新了。
3.計算屬性和監聽屬性
Vue 3.0 中計算屬性和監聽器的實現依賴 computed 和 watch 方法：
<template><div class="test"><h1>test count: {{count}}</h1><div>count * 2 = {{doubleCount}}</div><button @click="add">add</button></div></template><script>import { ref, computed, watch } from 'vue'export default {setup () {const count = ref(0)const add = () => {count.value++}watch(() => count.value, val => {console.log(`count is ${val}`)})const doubleCount = computed(() => count.value * 2)return {count,doubleCount,add}}}</script>
計算屬性 computed 是一個方法，裏面需要包含一個回調函數，當我們訪問計算屬性返回結果時，會自動獲取回調函數的值：
const doubleCount = computed(() => count.value * 2)
監聽器 watch 同樣是一個方法，它包含 2 個參數，2 個參數都是 function：
watch(() => count.value,val => {console.log(`count is ${val}`)})
第一個參數是監聽的值，count.value 表示當 count.value 發生變化就會觸發監聽器的回調函數，即第二個參數，第二個參數可以執行監聽時候的回調。
4.獲取路由
Vue 3.0 中通過 getCurrentInstance 方法獲取當前組件的實例，然後通過 ctx 屬性獲得當前上下文，ctx.$router 是 Vue Router 實例，裏面包含了 currentRoute 可以獲取到當前的路由信息。
<script>import { getCurrentInstance } from 'vue'export default {setup () {const { ctx } = getCurrentInstance()console.log(ctx.$router.currentRoute.value)}}</script>
5.Vuex集成
1.定義 Vuex 狀態
import Vuex from 'vuex'export default Vuex.createStore({state: {test: {a: 1}},mutations: {setTestA(state, value) {state.test.a = value}},actions: {getTestA({commit,dispatch},params){//....code....}},modules: {}})
Vuex 的語法和 API 基本沒有改變,只是引入、使用並更新狀態發生了變化。
2.使用、更新狀態
<template><div class="test"><div>state from vuex {{a}}</div><button @click="update">update a</button></div></template><script>import { ref, computed, watch, getCurrentInstance } from 'vue'export default {setup () {console.log(ctx.$router.currentRoute.value)const a = computed(() => ctx.$store.state.test.a)const update = () => {ctx.$store.commit('setTestA', count);// ctx.$store.dispatch('getTestA', count);}return {a,update}}}</script>
通過計算屬性來引用 Vuex 中的狀態，我們點擊 update a 按鈕後，會觸發 update 方法，此時會通過 ctx.$store.commit 調用 setTestA 方法，將 count 的值覆蓋 state.test.a 的值。調用actions同意方法，只是使用ctx.$store.dispatch調用了。
總結
對於Vue2.0過渡到Vue 3.0，對於有過實際vue開發經驗的人來說，學習成本很低了，3.0瞭解以上這些變化，基本上開發項目不會有問題了。
Vue3.0 已經具備了商業項目開發的必備條件，語法精煉，不管是代碼可讀性還是運行效率都非常贊。但由於未深入使用，目前還無法提出更多問題，需要在項目實戰中進一步發現和總結問題，再和大家分享交流。
好文和朋友一起看~
更多精彩