2020年9月19日凌晨，尤雨溪大大正式发布了3.0版本，代号：One Piece
Vue 是第一个我们国人开发的框架，且简单易于上手。现在迎来了3.0版本，我相信会越来越好。

下面是3.0版本的一些特点

在 Vue 3 中，基于对象的 2.x API 基本没有变化，3.0 还引入了 [Composition API]，旨在解决 Vue 在大规模应用中的使用痛点，实现了类似于 React 钩子的逻辑组成和重用，比 2.x 基于对象的 API 更灵活的代码组织模式和更可靠的类型推理。
Vue 3 与 Vue 2 相比，在捆绑大小 (tree-shaking 时减少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和内存使用 (少了 54%) 方面都有[显著的性能提升]
Vue 3 的代码库是用 TypeScript 编写的，具有自动生成，测试和捆绑的类型定义，因此它们始终是最新的。Composition API 可以很好地处理类型推断。Vetur 是我们的官方 VSCode 扩展，现在利用 Vue 3 改进的内部键入功能支持模板表达式和 props 类型检查。哦，如果您愿意，Vue 3 的打字完全支持 TSX。
为单文件组件 (SFC，即 .vue 文件) 提出了两个新特性：<script setup>和 <style vars>

1.Vue 3.0 项目初始化

npm install -g @vue/cli

安装成功后，查看版本

vue -V
@vue/cli 4.5.6

初始化项目（有router和vuex就可以，其他的按个人喜好配置）

vue create vue3-test

升级vue 3.0项目

cd vue3-test
vue add vue-next
/*
  执行上述指令后，会自动安装vue-cli-plugin-vue-next插件，该插件会完成以下操作：
  安装 Vue 3.0 依赖
  更新 Vue 3.0 webpack loader 配置，使其能够支持 .vue 文件构建（这点非常重要）
  创建 Vue 3.0 的模板代码
  自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本，如果未安装则不会升级
  自动生成 Vue Router 和 Vuex 模板代码
  完成上述操作后，该项目正式升级到vue 3.0
*/

2.Vue 3.0基本特性体验（这里只说和2x版本的不同处）

// 2x 版本 router
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

// 3.0 版本 router（与2x的变化不大，只是之前采用构造函数的方式，这里改为使用createRouter来创建Vue Router实例）
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

// 2x 版本 store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

// 3.0版本 store（与2x的变化不大，只是之前采用构造函数的方式，这里改为使用createStore来创建Vuex实例）
import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
});

.browserslist

根目录中多了一个.browserslist文件，可以指定项目的目标浏览器的范围
用于转译的 JavaScript 特性和添加CSS 浏览器前缀，可以减少兼容代码提高代码质量
如果想少一个文件，你也可以在package.json中添加browserslist字段，参数是一个数组

修改 store/index.js

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    test: {
      a: 1
    }
  },
  mutations: {
    setTestA (state, value) {
      state.test.a = value
    }
  },
  actions: {
  },
  modules: {
  }
});

修改 views/About.vue

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <div>count * 2 = {{doubleCount}}</div>
    <div>state from vuex {{a}}</div>
    <button @click="add">add</button>
    <button @click="update">update a</button>
  </div>
</template>
 
<script>
import { ref, reactive, computed, watch, getCurrentInstance } from 'vue'
/*
  ref 赋值单个变量，使用要这样 count.value
  reactive 赋值对象，可直接使用
  computed 计算属性
  watch 监听变量
  getCurrentInstance 获取当前组件的实例方法
*/
export default {
  setup () {
    // ref
    const count = ref(0)
    const add = () => {
      count.value++
    }
    // reactive 
    const data = reactive({
      a: 1,
      b: 2,
      c: 3
    })
    console.log(data, data.a)
    // watch 
    watch(() => count.value, val => {
      console.log(`count is ${val}`)
    })
    // computed 
    const doubleCount = computed(() => count.value * 2)
    // getCurrentInstance 
    const { ctx } = getCurrentInstance()
    console.log(ctx.$router.currentRoute.value)
    const a = computed(() => ctx.$store.state.test.a)
    const update = () => {
      ctx.$store.commit('setTestA', count)
    }
    return {
      count,
      doubleCount,
      add,
      a,
      update
    }
  }
}
</script>

总结

vue 3.0都写在setup里，以前的所有数据状态都写在data里，
vue 2.0所有的方法都写在methods里，而现在可以根据功能模块把状态和方法划分在一起，更利于模块化。

Vue 3.0新文档网站。如果是 Vue 2.x 用户，访问迁移指南。