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：

<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 已经具备了商业项目开发的必备条件，语法精炼，不管是代码可读性还是运行效率都非常赞。但由于未深入使用，目前还无法提出更多问题，需要在项目实战中进一步发现和总结问题，再和大家分享交流。    

好文和朋友一起看~  

   扫码关注      
更多精彩