前言
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：
Vue 3.0 中初始化状态通过 setup 方法，定义状态需要调用 ref 方法。那么如何更新状态以及事件绑定呢？ 这里的 add 方法不再需要定义在 methods 中，但注意更新 count 值的时候不能直接使用 count++，而应使用 count.value++，更新代码后，点击按钮，count 的值就会更新了。3.计算属性和监听属性
Vue 3.0 中计算属性和监听器的实现依赖 computed 和 watch 方法：
计算属性 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 可以获取到当前的路由信息。
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.使用、更新状态
通过计算属性来引用 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 已经具备了商业项目开发的必备条件，语法精炼，不管是代码可读性还是运行效率都非常赞。但由于未深入使用，目前还无法提出更多问题，需要在项目实战中进一步发现和总结问题，再和大家分享交流。
