vue2中的生命周期都有哪些
时间: 2023-02-08 22:40:34 浏览: 58
Vue2 中的生命周期有以下几个:
1. beforeCreate: 实例刚被创建, 但还未初始化完成.
2. created: 实例已经创建完成, 数据观测(data observer) 和 event/watcher 事件配置完成, 但还未挂载(mount)
3. beforeMount: 组件的挂载即将开始, 模板编译还没有开始
4. mounted: 组件已经挂载完成
5. beforeUpdate: 组件数据更新前
6. updated: 组件数据更新后
7. beforeDestroy: 组件销毁前
8. destroyed: 组件销毁后
相关问题
vue2的生命周期有哪些
Vue2的生命周期包括以下8个阶段:
1. beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性。
2. created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板。
3. beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中。
4. mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示。
5. beforeUpdate:状态更新之前执行此函数,此时 data 中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点。
6. updated:实例更新完毕之后调用此函数,此时 data 中的状态值和界面上显示的数据都已经完成了更新。
7. beforeDestroy:实例销毁之前调用,在这一步,实例仍然完全可用。
8. destroyed:Vue实例销毁后调用,调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
vue3中的生命周期函数有哪些
Vue 3 中的生命周期函数与 Vue 2 类似,但有些名称和用法有所改变。下面是 Vue 3 中常用的生命周期函数:
- `beforeCreate`:在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- `created`:在实例创建完成后立即被调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
- `beforeMount`:在挂载开始之前被调用。相关的 render 函数首次被调用。
- `mounted`:实例挂载完成后被调用,此时 DOM 已经渲染完成。如需在挂载后进行一些操作,可以在这个钩子函数中执行。
- `beforeUpdate`:在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子函数中对更新之前的状态进行更改。
- `updated`:在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时,组件 DOM 已经更新,可以执行依赖于 DOM 的操作。
- `beforeUnmount`:在实例销毁之前调用。在这一步,实例仍然完全可用。
- `unmounted`:在实例销毁之后调用。调用后,所有的指令都被解绑,所有的事件监听器都被移除,所有的子实例也都被销毁。
除了上述生命周期函数,Vue 3 还有一些较少使用的生命周期函数,如 `activated` 和 `deactivated`(对应 `keep-alive` 组件的激活和停用时调用),以及 `errorCaptured`(捕获子组件抛出的错误)。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)