vue 父子组件的生命周期
时间: 2023-10-26 08:42:04 浏览: 77
Vue父子组件的生命周期如下:
1.父组件beforeCreate
2.父组件created
3.父组件beforeMount
4.子组件beforeCreate
5.子组件created
6.子组件beforeMount
7.子组件mounted
8.父组件mounted
9.父组件beforeUpdate
10.子组件beforeUpdate
11.子组件updated
12.父组件updated
13.父组件beforeDestroy
14.子组件beforeDestroy
15.子组件destroyed
16.父组件destroyed
在组件的生命周期中,我们可以在特定的时候执行一些任务,比如在created钩子函数中请求数据,mounted钩子函数中操作DOM,beforeDestroy钩子函数中清除定时器等。了解组件的生命周期可以更好地掌握Vue的使用。
相关问题
vue父子组件生命周期
Vue.js中父子组件的生命周期可以简单地描述为:
父组件生命周期:
1. beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。
2. created:在实例创建完成后被立即调用,这时候实例已完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
3. beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。
4. mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
5. beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
6. updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
8. destroyed:实例销毁后调用。该钩子被调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁。
子组件生命周期:
1. beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。
2. created:在实例创建完成后被立即调用,这时候实例已完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
3. beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。
4. mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
5. beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
6. updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
8. destroyed:实例销毁后调用。该钩子被调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁。
vue父子组件生命周期顺序
Vue父子组件生命周期的顺序如下:
1.父组件beforeCreate
2.父组件created
3.父组件beforeMount
4.子组件beforeCreate
5.子组件created
6.子组件beforeMount
7.子组件mounted
8.父组件mounted
9.父组件beforeUpdate
10.子组件beforeUpdate
11.子组件updated
12.父组件updated
13.父组件beforeDestroy
14.子组件beforeDestroy
15.子组件destroyed
16.父组件destroyed
其中,父组件的生命周期顺序为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
子组件的生命周期顺序为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.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)