1.1.1. 首先 我们 来看看 Vue3 相对于 Vue2做了哪些改动

• 性能 (相比 Vue2 快了两倍有余 )
• tree shaking (摇树优化 又称 按需编译)
• composition api (类似React Hooks)
• ts support (对 Typescript 更好的支持)
• custom renderer api (自定义渲染API)

1.1.2. 初体验

体验 Vue3的方式 最简单的两种

• Vue-Cli 版本需大于4.5 （https://github.com/vuejs/vue-cli/releases/tag/v4.5.0）
• Vite （按需编译新框架 尤大新作）

1.1.3. 整体架构

1.1.4. 了解 Composition

https://v3.vuejs.org/api/composition-api.html#composition-api

https://vue-composition-api-rfc.netlify.app/zh/

1.1.4.1. 我们先来看看 在我们Vue2中 使用option api 和 在Vue3中使用composition api的区别

可以看到 在我们 options api 上 我们的代码 逻辑是分散开的 同一个颜色的区块 代表 相同功能的 代码

比如 我们在vue2时 想要书写一个 展示 当前变量的值 和 当前这个变量值的双倍值的一个小玩具

代码如下

<template>
  <button @click="increment">
    Count is: {{ count }}, double is: {{ double }}
  </button>
</template>
 
<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    computed: {
        double: () => {
            return this.count * 2
        }
    },
    methods: {
        increment() {
            this.count++;
        }
    }
}
</script>

通过代码 我们不难能推断出 未来 如果 代码数量非常多 我们的逻辑非常分散 变量count的定义和使用 将会跨越 数百行 之多 我们需要 不断地上下横跳来修改代码 并且 当逻辑分散后 你可能 过不了多久就开始 不知道某段函数是做什么的...

并且缺少一个 可复用代码的优秀解决方案 现阶段 我们在vue2中 使用mixin 使用高阶函数 他们都是有弊端的 比如

mixins缺点

1. 存在冲突 在使用中 可能会出现属性 方法 重名冲突
2. 依赖关系不明确 多个mixins通信的情况下
3. 逻辑复用不灵活

hoc 高阶函数缺点

1. 层层嵌套
2. 重名冲突

所以 composition api（下文中称之为组合式API）出现了 它解决了 逻辑复用的痛点 并且 使得相关联的代码将都处在一个色块内

1.1.4.2. 我将通过一个 简短的代码 向你描述组合式API的使用

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>
 
<script>
// reactive 是什么？
import { reactive, computed } from 'vue'
 
export default {
  // setup 是什么？
  setup() {
    const state = reactive({
      count: 0
    })
    const double = computed(() => state.count * 2)
    const increment = () => {
      state.count++
    }
 
    return {
      state,
      double,
      increment
    }
  }
}
</script>

到了这里 我们就发现 这跟Vue2差距好多啊 这个从vue中导出的reactive computed都是做什么的?