vue3生命周期及setup介绍(vue3生命周期及使用)

vue3生命周期及setup介绍 🌷 生命周期

推荐整理分享vue3生命周期及setup介绍(vue3生命周期及使用)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3的生命周期函数,vue生命周期的四个阶段,vue3生命周期及干什么,vue生命周期详解,vue3的生命周期函数,vue3生命周期及使用,vue3生命周期及干什么,vue3 生命周期,内容如对您有帮助，希望把文章链接给更多的朋友！

下图对比了vue3（左）和vue2（右）的生命周期：vue3将destoryed该名成了unmounted，相应的beforeDestory改成了beforeUnmounted。除此之外在组合式API中新增了个钩子函数：setup。它发生在beforeCreate之前。 先简单介绍下setup函数：

setup() 钩子是在组件中使用组合式 API 的入口setup中没有thissetup函数只会在组件初始化的时候执行一次setup函数在beforeCreate生命周期钩子执行之前执行生命周期函数

与vue2不同，vue3中使用生命周期函数需要先导入生命周期钩子函数，并且生命周期函数可以调用多次。

<script lang="ts">import { onMounted } from 'vue'export default { setup() { onMounted(() => { console.log('mounted')})onMounted(() => { console.log('mounted two')}) }}</script>

你也可以使用setup语法糖，看起来更简洁一些。

<script setup lang="ts">import { onMounted } from 'vue'onMounted(() => { console.log('mounted')})onMounted(() => { console.log('mounted two')})</script><style scoped></style>不同API的生命周期选项式API组合式APIbeforeCreate不需要（直接写到setup函数中）created不需要（直接写到setup函数中）beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyedonBeforeUnmountdestroyedonUnmounted🍁setup介绍1. 访问Props

setup 函数的第一个参数是组件的 props。和标准的组件一致，一个 setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新。

export default { props: { title: String }, setup(props) { // 注意这里不要解构props，这样会使解构出来的变量失去响应性。如果一定要解构需要使用响应式api转发下。 console.log(props.title) }}2. setup上下文

传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值：

export default { setup(props, context) { // 透传 Attributes（非响应式的对象，等价于 $attrs） console.log(context.attrs) // 插槽（非响应式的对象，等价于 $slots） console.log(context.slots) // 触发事件（函数，等价于 $emit） console.log(context.emit) // 暴露公共属性（函数） console.log(context.expose) }}

与props不同，上下文对象是非响应式的，可以安全地解构：

export default { setup(props, { attrs, slots, emit, expose }) { ... }}

attrs 和 slots 的属性都不是响应式的。如果你想要基于 attrs 或 slots 的改变来执行副作用，那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

expose函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容：

export default { setup(props, { expose }) { // 让组件实例处于 “关闭状态” // 即不向父组件暴露任何东西 expose() const publicCount = ref(0) const privateCount = ref(0) // 有选择地暴露局部状态 expose({ count: publicCount }) }}3. 与渲染函数一起使用

setup 也可以返回一个渲染函数，此时在渲染函数中可以直接使用在同一作用域下