目录
- 1,setup
- 2,生命周期函数
-
- [1,为什么删除了 beforeCreate 和 created?](#1,为什么删除了 beforeCreate 和 created?)
- 2,新增钩子函数
- [3,compositionAPI 相比于 optionAPI 有哪些优势?](#3,compositionAPI 相比于 optionAPI 有哪些优势?)
Vue3 中新增了 composition API(组合式API),包括
- 响应式API
- setup()
- 生命周期函数
setup()
和生命周期函数都是和组件深度绑定的,不能脱离组件单独存在。
1,setup
setup()
是在组件中使用组合式API的入口。该函数在组件属性 props 被赋值后立即执行,早于所有生命周期函数
html
<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> 语法糖,那就会默认返回所有顶层绑定。
- 也可以通过它将组合式API集成到选项式API中。
html
<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: 跟踪或触发渲染的方式
举例:
html
<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 有哪些优势?
- 为了更好的逻辑复用和代码组织。
- 更好的类型推导。
compositionAPI 配合独立的响应式API,可以在组件内部进行更加细粒度的控制,使得组件中不同的功能高度聚合,提升了代码的可维护性。
对于不同组件的相同功能,也能够更好的复用。
相比于optionAPI,compositionAPI 中没有了指向奇怪的 this,所有的 api 变得更加函数式,这有利于和类型推断,比如和 TS 深度配合。
以上。