Vue 组合式 API

优化周期函数

Vue2 选项 API 一个组件的周期函数只能有一个，比如 mounted 周期中有很多获取数据的逻辑都在这里，在 updated 周期中又有很多更新的逻辑在这里。

选项 API：

export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: 3,
      d: 4,
      e: 5,
      f: 6
    }
  },
  mounted() {
    getA();
    // 做一些关于 getA 的后续代码
    getB();
    // 做一些关于 getA 的后续代码
    getC();
    // 做一些关于 getA 的后续代码
    getD();
    // 做一些关于 getA 的后续代码
    getE();
    // 做一些关于 getA 的后续代码
  },
  updated() {
    getA();
    // 做一些关于 getA 的后续代码
    getB();
    // 做一些关于 getA 的后续代码
    getC();
    // 做一些关于 getA 的后续代码
    getD();
    // 做一些关于 getA 的后续代码
    getE();
    // 做一些关于 getA 的后续代码
  }
}

如上代码所示，updated 和 mounted 周期中，完全不相关的代码被同一个周期组合在一起。

组合式 API：

onMounted(() => {
  getA();
  // 做一些关于 getA 的后续代码
});

onMounted(() => {
  getB();
  // 做一些关于 getB 的后续代码
});

onMounted(() => {
  getC();
  // 做一些关于 getC 的后续代码
});

在组合式 API 中，可以把相关的代码组合在一起，和选项式 API 有很大的不同。

抽离状态逻辑

在 Vue2 中，响应式数据、生命周期函数都在组件对象中定义（选项 API），如果要抽离一些有状态的逻辑出去，只能通过 mixins 来复用，无状态逻辑的函数可以抽离到 js 文件。

Vue 组合式 API 可以封装和复用有状态逻辑的函数，即组合式 API 可以让我们在组件外使用响应式以及其他的 Vue 特性。

下面是 Vue 文档的一个例子，Vue3 组合式 API，在 mouse.js 文件中通过 ref、onMounted、onUnmounted 继续使用 Vue 的特性。周期函数可以在组件外调用，可以在组件外声明响应式数据。

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}