Vue3.x 的组合式 API 简介

Vue3.x 组合式 API 官方文档

why:

解决的问题：Vue2.x 组件中 data, methods，props 等使用方式，会使得写的逻辑都很分散，代码难以阅读。而组合式 API 可以使得逻辑比较集中。

how:

• setup 函数
  setup 组件选项。一个接收 props 和 context 的函数。setup 返回的所有内容都可以在组件的其余部分中调用。通过 this 可以直接调用 setup 中返回的内容
  setup 中不能使用 this, 它的调用发生在 data property、computed property 或 methods 被解析之前，所以无法再 setup 中获取

  • 注册生命周期函数，为了使组合式 API 和选项式 API 一样完成。生命周期函数名称和选项式的名称一样，但是在前面加了on前缀：即 mounted 看起来会像 onMounted。这些函数接受一个回调，声明周期被函数调用时，会执行这个回调
  • 在 setup 中使用 watch，和正常使用 watch 一样

• ref 函数，将变量变成响应式变量，ref 为值创建了一个响应式引用
  接收参数并返回一个带有 value（值为传入的参数） 属性的对象。可以通过它访问和修改。

• toRefs 函数，使用 toRefs 创建对 props 中的 user property 的响应式引用 const { user } = toRefs(props)

注意上面提到的一个方法都需要单独从 vue 中引入

import { ref, onMounted, toRefs, watch, computed } from 'vue';

• 独立的组合式函数: 如果只是把一个散乱的逻辑都移动到 setup 函数里，并没有很大的意义。把他们挪到 setup 里，是为了后面更好的抽离出独立的组合式函数。感觉很像是 react 的自定义 hooks。使用的方式也差不多。