Vue中setup函数与生命周期钩子关系解析？

本文共计1189个文字，预计阅读时间需要5分钟。

目录生命周期间生命周期函数不同于API的生命周期setup介绍

1.访问Props

2.setup上下文

3.与渲染函数一起使用生命周期

生命周期间对比（Vue3（左）与Vue2（右））

Vue3将destroyed改名为beforeUnmount

目录

• 生命周期
• 生命周期函数
• 不同API的生命周期
• setup介绍
• 1. 访问Props
• 2. setup上下文
• 3. 与渲染函数一起使用

生命周期

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

先简单介绍下setup函数：

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

生命周期函数

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