vue2的生命周期都那些
时间: 2023-10-23 18:10:18 浏览: 24
Vue2的生命周期共有8个:
1. beforeCreate(创建前):在实例初始化之后,数据观测和事件配置之前被调用。
2. created(创建后):在实例创建完成后被立即调用。
3. beforeMount(挂载前):在挂载开始之前被调用:相关的 render 函数首次被调用。
4. mounted(挂载后):el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
5. beforeUpdate(更新前):数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
6. updated(更新后):由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
7. beforeDestroy(销毁前):实例销毁之前调用。
8. destroyed(销毁后):实例销毁后调用。
相关问题
vue2生命周期 vue3生命周期
Vue2的生命周期钩子函数包括:
1. beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。
2. created:在实例创建完成后被立即调用,在这一步,实例已经完成以下配置:数据观测(data observer)、属性和方法的运算、watch/event 事件回调。
3. beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。
4. mounted:实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。
5. beforeUpdate:数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。
6. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成时调用。
7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
8. destroyed:实例销毁后调用,清理工作应该在这里进行。
Vue3的生命周期钩子函数进行了一些变化:
1. beforeCreate 和 created 保持不变。
2. beforeMount 和 mounted 保持不变。
3. beforeUpdate 和 updated 保持不变。
4. beforeUnmount:在卸载组件之前调用,可以在这里进行一些清理工作。
5. unmounted:组件卸载后调用。
需要注意的是,Vue3引入了新的 Composition API,可以使用 setup 函数来代替之前的生命周期钩子函数。在 setup 函数中,可以使用 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted 等函数来处理相应的逻辑。这种方式更加灵活和易用。
Vue2生命周期钩子
Vue2生命周期钩子是在Vue实例的不同阶段执行的一组函数。这些钩子函数允许我们在特定的生命周期阶段执行自定义的逻辑。以下是Vue2的生命周期钩子及其执行顺序:
1. beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时,实例还没有被创建,无法访问到data、computed、methods等属性。
2. created:在实例创建完成后被调用。此时,实例已经完成了数据观测,属性和方法的运算,但是还没有挂载到DOM上。
3. beforeMount:在挂载开始之前被调用。此时,模板编译已经完成,但是还没有将模板渲染到页面上。
4. mounted:在挂载完成后被调用。此时,实例已经被挂载到DOM上,可以访问到DOM元素。
5. beforeUpdate:在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前。可以在这个钩子中进行状态更新操作。
6. updated:在数据更新之后被调用,发生在虚拟DOM重新渲染和打补丁之后。可以执行依赖于DOM的操作。
7. beforeDestroy:在实例销毁之前被调用。此时,实例仍然完全可用。
8. destroyed:在实例销毁之后被调用。此时,实例中的所有指令、事件监听器都已经被移除,所有子实例也都被销毁。
相关推荐
![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)