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