2020/4/17凌晨 4 点左右,vue-next v3.0.0-beta.1 版本发布，做为使用了接近两年vue的我来说，当然是在第一时间就上手体验一波.

vue-next v3.0.0-beta.1发布的内容有:

• 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

vue3.0项目初始化

1. 查看自己的cli版本vue -V,如果不是最新版，需要安装最新版本的vue-cli

   • npm install -g @vue/cli

2. 初始化vue项目，进入vue-cli Ui控制台创建

   • 勾选基本的Vuex，Vue-Router，CSS Pre-processors，Linter / Formatter等.
3. (还没完，先别急着启动项目)目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，vue-cli 还没有直接支持，我们进入项目目录，并输入以下指令:
   • vue add vue-next

     执行这一段后会:

   • 安装 Vue 3.0 依赖
   • 更新 Vue 3.0 webpack loader 配置，使其能够支持 .vue 文件构建（这点非常重要）
   • 创建 Vue 3.0 的模板代码
   • 自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本，如果未安装则不会升级
   • 自动生成 Vue Router 和 Vuex 模板代码

尝试一下vue3.0的新特性

Vue 3.0 中初始化状态通过 setup 方法

import { ref } from 'vue'
export default{
setup (){
}
}

定义状态ref与事件

<template>
  <div>
    <p>count：{{count}}</p>
    <button @click="add">加</button>
  </div>
</template>

import { ref } from 'vue'
export default{
setup (){
    // 创建count变量
    const count = ref(0)
    // 创建一个方法
    const add = () => {
      count.value++
    }
 return {
 count,
 add
 }
}
}

计算属性与监听器

import { ref,computed } from 'vue'
export default{
setup (){
    // 创建count变量
    const count = ref(0)
    // 创建一个方法
    const add = () => {
      count.value++
    }
    // 计算属性
    const GetCount = computed(() => count.value * 2)
    // 监听
    watch(() => count.value, val => { console.log(val) })
 return {
 count,
 add,
 GetCount
 }
}
}

ctx获取上下文

1. 通过getCurrentInstance方法可以获取上下文，通过ctx.router是路由实例，ctx.store获取vuex实例等等.

   import { getCurrentInstance } from 'vue'
   export default {
   setup () {
   // ctx获取上下文，路由信息，vuex等
   const { ctx } = getCurrentInstance()
   }
   }

   总结一下

2. vue3.0有一些与react hook非常的相似，如果有使用过react hook应该不会非常的诧异.
3. 目前只是发布了beta版，并不适用在项目中.

4. 适配vue3.0的vuex与vue-router都还在开发中，现在的vuex与vue-router改动并不大，适配vue3.0的vuex与vue-router可能会有一些useRoute,useStore类似react的，这些需要等正式版本发布才能揭晓.

   非常期待vue3.0的正式版本，应该又是一种全新的体验吧.