Vue 3.0 新特性体验

1、vue简介

Vue是一个“用于构建用户应用程序的渐进式框架”。 它的设计非常灵活，能够将各个Vue库合并到其他项目中，或者完全使用Vue为复杂项目提供动力。

Vue通常被视为更易于理解和易于实现的框架之一。 允许支持纯HTML模板，而像React这样的工具使用Javascript定义DOM元素。

2、 Vue 3.0中最大的变化

（1）Performance：性能更比Vue 2.0强。
（2）Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
（3）Composition API：组合API
（4）Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”
（5）Better TypeScript support：更优秀的Ts支持
（6）Custom Renderer API：暴露了自定义渲染API。

3、升级方法

（1）升级cli，需要cli4.0

npm install -g @vue/cli

（2）初始化 vue 项目

vue create vue-next-demo

（3）升级 Vue 3.0 项目
目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，
vue-cli 还没有直接支持，我们进入项目目录，并输入以下指令：

cd vue-next-demo
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，

注意该插件还不能支持 typescript，用 typescript 的同学还得再等等。

4、特性变化

路由： createRouter 来创建 Vue Router 实例
vuex：Vuex.createStore来创建

示例：

<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>
  </div>
</template>

<script>
  import { ref, computed, watch, getCurrentInstance } 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)
      const { ctx } = getCurrentInstance()
      console.log(ctx.$router.currentRoute.value)
      const a = computed(() => ctx.$store.state.test.a)
      return {
        count,
        doubleCount,
        add,
        a
      }
    }
  }
</script>

5、总结：

（1）Vue 3.0 中初始化状态通过 setup 方法，以前的所有数据状态都写在data里；类似react组件结构；
（2）定义变量需要调用 ref 方法；
（3）通过 getCurrentInstance 方法获取当前组件的实例；
（4） You强调了Vue 3.0中的五个关键变化：
a.速度更快：内存使用量是Vue 2.0观察者的一半；
b.尺寸更小：约为10 kb gzipped；
c.可维护性：从Flow转向TypeScript ；
d.针对原生：与平台无关 - 意味着它将运行纯Javascript；
e.便于使用。