Vue 组合式 API
优化周期函数
Vue2 比如 mounted 周期中有很多获取数据的逻辑都在这里，在 updated 周期中又有很多更新的逻辑在这里。
在老版本的 Vue3 文档中讲解组合式 API 就用到了下面类似的例子，新版本的 Vue3 文档更着重讲解组合式 API 对状态逻辑复用的好处。
选项式 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：
const a = ref(1);
onMounted(() => {
getA();
// 做一些关于 getA 的后续代码
});
const b = ref(1);
onMounted(() => {
getB();
// 做一些关于 getB 的后续代码
});
const c = ref(1);
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 }
}
React Hook
React 以前都是在 class 中定义组件，从 React 16.8 之后的版本推荐函数定义组件。React Hook 可以让我们在函数中继续使用 state 以及其他的 React 特性。
React class 编写组件也有和 Vue2 选项式 API 差不多的问题：
- 生命周期中不相关的代码被强行组合在一起，相关的代码被强行隔开。
- 在组件之间复用状态逻辑很难。
React Hook 从组件中提取状态逻辑，这些逻辑可以单独测试并复用。Hook 在无需修改组件结构的情况下复用状态逻辑。
React Hook 不需要通过 this.props.xxx 来获取状态数据，很大程度上提升编程效率和可阅读性。class 不能很好的压缩，且热重载出现不稳定的情况。