为什么要使用Composition API?

根据官方的说法，vue3.0的变化包括性能上的改进、更小的 bundle 体积、对 TypeScript 更好的支持、用于处理大规模用例的全新 API，全新的api指的就是本文主要要说的组合式api。

在 vue3 版本之前，我们复用组件（或者提取和重用多个组件之间的逻辑），通常有以下几种方式：

Mixin：命名空间冲突 & 渲染上下文中暴露的 property 来源不清晰。例如在阅读一个运用了多个 mixin 的模板时，很难看出某个 property 是从哪一个 mixin 中注入的。
Renderless Component：无渲染组件需要额外的有状态的组件实例，从而使得性能有所损耗
Vuex：就会变得更加复杂，需要去定义 Mutations 也需要去定义 Actions

上述提到的几种方式，也是我们项目中正在使用的方式。对于提取和重用多个组件之间的逻辑似乎并不简单。我们甚至采用了 extend 来做到最大化利用已有组件逻辑，因此使得代码逻辑依赖严重，难以阅读和理解。
Vue3 中的 Composition API 便是解决这一问题；且完美支持类型推导，不再是依靠一个简单的 this 上下文来暴露 property（比如 methods 选项下的函数的 this 是指向组件实例的，而不是这个 methods 对象）。其是一组低侵入式的、函数式的 API，使得我们能够更灵活地「组合」组件的逻辑。

业务实践

组合式api的出现就能解决以上两个问题，此外，它也对TypeScript类型推导更加友好。
在具体使用上，对vue单文件来说，模板部分和样式部分基本和以前没有区别，组合式api主要影响的是逻辑部分。下面是一个经典的vue2的计数器案例.：

vue2 实现

//Counter.vue
export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    double () {
      return this.count * 2;
    }
  }
}

vue3 composition api

当我们在组件间提取并复用逻辑时，组合式API 是十分灵活的。一个组合函数仅依赖它的参数和 Vue 全局导出的 API，而不是依赖其微妙的 this 上下文。你可以将组件内的任何一段逻辑导出为函数以复用它。

基于响应式
提供 vue 的生命周期钩子
组件销毁时自动销毁依赖监听
可复用的逻辑

// Counter.vue
import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count * 2)
    function increment() {
      count.value++;
    }
    return {
      count,
      double,
      increment
    }
  }
}

代码提取

Composition API的第一个明显优点是提取逻辑很容易。使用Composition提取上面Counter.vue组件代码。

//useCounter.js 组合函数
import { ref, computed } from "vue";

export default function () {
  const count = ref(0);
  const double = computed(() => count * 2)
  function increment() {
    count.value++;
  }
  return {
    count,
    double,
    increment
  }
}

代码重用

要在组件中使用该函数，我们只需将模块导入组件文件并调用它（注意导入是一个函数）。这将返回我们定义的变量，随后我们可以从 setup 函数中返回它们。

// MyComponent.js
import useCounter from "./useCounter.js";

export default {
  setup() {
    const { count, double, increment } = useCounter();
    return {
      count,
      double,
      increment
    }
  }
}

相比而言，组合式 API：

暴露给模板的 property 来源十分清晰，因为它们都是被组合逻辑函数返回的值
不存在命名空间冲突，可以通过解构任意命名
不再需要仅为逻辑复用而创建新的组件实例

常用api介绍

setup

export default {
  setup(props, context) {
    console.log(context); // { attrs, slots, emit }
    //context.emit('emitFun', {emit: true})
    return { privateMsg: props.msg };
  }
}

setup函数是组件内使用 component API 的入口。是在组件实例被创建时，初始化了 props 之后调用，处于 created 前。还有以下特点：
1.可以返回一个对象或函数，对象的属性会合并到模板渲染的上下文中；
2.第一个参数是响应式的props对象，注意不能解构 props 对象，会使其失去响应性。 **
也不可直接修改 props，会触发警告
3.第二个参数是一个上下文对象，暴露了 attrs，slots，emit 对象
4.this 在 setup 函数中不可用。**因为它不会找到组件实例。setup 的调用发生在 data、computed 和 methods 被解析之前，所以它们无法在 setup 中被获取。

props与上下文对象attrs的区别：
1、props 要先声明才能取值，attrs 不用先声明
2、props 声明过的属性，attrs 里不会再出现
3、props 不包含事件，attrs 包含。vue2中的$listeners 被整合到 $attrs

reactive

reactive函数接收一个普通对象然后返回对象的响应式代理，同 Vue.observable。
原理：通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新。

ref

ref和reactive存在一定的相似性，所以需要完全理解它们才能高效的在各种场景下选择不同的方式，它们之间最明显的区别是ref使用的时候需要通过.value来取值，reactive不用。ref是property而reactive是proxy，reactive能够深度监听各种类型对象的变化，ref是处理诸如number，string之类的基本数据类型。
它们的区别也可以这么理解，ref是使某一个数据提供响应能力，而reactive是为包含该数据的一整个对象提供响应能力。
在模板里使用ref和嵌套在响应式对象里时不需要通过.value，会自己解开：

除了响应式ref还有一个引用DOM元素的ref，2.x里面是通过this.$refs.xxx来引用，但是在setup里面没有this，所以也是通过创建一个ref来使用：

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net

vue3组合式API介绍