Vue3的组合式API介绍，和Vue2生命周期函数的变化

Vue3 中新增了 composition API（组合式API），包括

• 响应式API
• setup()
• 生命周期函数

setup() 和生命周期函数都是和组件深度绑定的，不能脱离组件单独存在。

1，setup

官网参考

1. setup() 是在组件中使用组合式API的入口。该函数在组件属性 props 被赋值后立即执行，早于所有生命周期函数

<script>
export default {
  setup(props, context){
    // props 是一个对象，包含了所有的组件属性值
    // context 是一个对象，提供了组件所需的上下文信息
  }
}
</script>

context对象的成员

成员	类型	说明
attrs	对象	同vue2的this.$attrs
slots	对象	同vue2的this.$slots
emit	方法	同vue2的this.$emit
expose	方法	新。暴露公共属性

另外，在 setup() 函数中返回的对象会暴露给模板和组件实例。如果使用的 <script setup> 语法糖，那就会默认返回所有顶层绑定。

setup() 中定义的变量，必须通过 ref() 返回才能变成响应式。
在模板中可以直接使用变量，而不用 .value，是因为访问的是实例的属性，已经处理过了。
而在 setup() 中访问时，还是访问的这个包装后对象，不是实例属性。

2. 也可以通过它将组合式API集成到选项式API中。

<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },
  mounted() {
    console.log(this.count) // 0
  }
}
</script>

2，生命周期函数

vue2 option api	vue3 option api	vue 3 composition api
beforeCreate	beforeCreate	不再需要，代码可放到setup中
created	created	不再需要，代码可放到setup中
beforeMount	beforeMount	onBeforeMount
mounted	mounted	onMounted
beforeUpdate	beforeUpdate	onBeforeUpdate
updated	updated	onUpdated
beforeDestroy	改 beforeUnmount	onBeforeUnmount
destroyed	改unmounted	onUnmounted
errorCaptured	errorCaptured	onErrorCaptured
-	新renderTracked	onRenderTracked
-	新renderTriggered	onRenderTriggered

1，为什么删除了 beforeCreate 和 created？

因为这2个是用于在 optionAPI 中完成数据响应式的。而 vue3 的响应式API是独立的，所以不需要。

2，新增钩子函数

钩子函数	参数	执行时机
renderTracked	DebuggerEvent	渲染 vdom 收集到的每一次依赖时
renderTriggered	DebuggerEvent	某个依赖变化导致组件重新渲染时

参数DebuggerEvent:

• target: 跟踪或触发渲染的对象
• key: 跟踪或触发渲染的属性
• type: 跟踪或触发渲染的方式

举例：

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
</template>

<script>
export default {
  props: {
    msg: Boolean,
  },
  data() {
    return {
      count: 0,
    };
  },
  renderTracked(e) {
    console.log("renderTracked", e);
  },
  renderTriggered(e) {
    console.log("renderTriggered", e);
  },
};
</script>

首先，renderTracked() 会执行2次，因为收集了2个依赖 msg 和 count。

当点击修改 count 时，renderTriggered() 会执行一次，因为依赖 count 发生了变化。

3，compositionAPI 相比于 optionAPI 有哪些优势？

1. 为了更好的逻辑复用和代码组织。
2. 更好的类型推导。

compositionAPI 配合独立的响应式API，可以在组件内部进行更加细粒度的控制，使得组件中不同的功能高度聚合，提升了代码的可维护性。
对于不同组件的相同功能，也能够更好的复用。

相比于optionAPI，compositionAPI 中没有了指向奇怪的 this，所有的 api 变得更加函数式，这有利于和类型推断，比如和 TS 深度配合。

---

以上。