vue3生命周期:父组件与子组件谁先挂在的问题

  • 结论:App永远是最后挂载的

  • vue的解析流程:

1.入口是index.html,发现它里面引入了main.ts,

2.这时候main.ts开始工作,main.ts一工作就发现要把App塞到页面上去,

3.于是来到App.vue里面去解析这个组件,发现App里用到其他子组件,这时vue的机制会找到子组件,解析子组件里所有的东西,等到将最后一个子组件解析完了(该调用的钩子函数都调完了),App才会挂载

各个组件调用代码:

控台打印:

注意点:

  • vue3在挂载的时候,不是帮我们调用onMounted
  • onMounted是我们自己调用的
  • vue3在挂载的时候帮我们调用onMounted所指定的那个红框里的函数
Vue.js生命周期是一个重要的概念,它描述了 Vue 组件从创建到销毁的整个过程中的一系列事件,这使得开发者能够在此期间插入自定义的行为。对于父子组件间的生命周期管理,有一些关键阶段需要关注: ### 组件与子组件生命周期 #### 子组件生命周期钩子函数 1. **beforeCreate()**: 在子组件实例创建之前调用,此时数据属性尚未初始化。 2. **created()**: 在子组件实例创建之后立即调用,此时数据属性已经初始化完毕,但还未载到 DOM 上。 3. **beforeMount()**: 当组件接收到 prop 和事件监听器等依赖时调用,发生在 `mounted()` 之前,通常用于执行一些预渲染操作。 4. **mounted()**: 当子组件的实例及其子节点被实际添加到 DOM 上之后调用。这是执行 DOM 相关操作的最佳时机。 5. **beforeUpdate()**: 数据更新之前调用,在新的虚拟 DOM 生成并计算差异之前触发。 6. **updated()**: 数据更新之后,DOM 已经完成更新之后调用。 7. **beforeDestroy()**: 子组件即将被销毁之前调用,可以在这里清除订阅、释放资源等。 8. **destroyed()**: 子组件及其所有子组件完全销毁之后调用。 #### 组件如何影响子组件生命周期 组件可以间接控制子组件生命周期,通过传递特定的数据属性或事件来触发某些操作: 1. **v-lifecycle** 属性:允许您将生命周期钩子函数绑定到子组件,例如,`<child-component v-once="beforeCreate">` 可以让组件直接将生命周期函数注入给子组件。 2. **父子组件通信**:通过 props 或者 Vuex(状态管理模式),组件可以在子组件的状态变化时触发相应的生命周期方法。例如,当组件发送数据变更信号时,子组件可能会触发某个生命周期函数来进行响应。 3. **事件系统**:利用 Vue 的事件机制,组件可以向子组件触发事件,并在子组件中注册对应的生命周期函数作为事件处理器。 ### 示例说明 假设有一个组件 `App.vue` 中包含了一个动态加载的子组件: ```html <!-- App.vue --> <template> <div id="app"> <child-component :msg="message" @update-message="setMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { message: 'Hello from parent!', }; }, methods: { setMessage(newMessage) { this.message = newMessage; }, }, }; </script> ``` 在这个例子中,`App.vue` 是组件,它通过 `props` 接收 `msg`,并通过一个事件 `@update-message` 向子组件发送消息更新。子组件 `ChildComponent.vue` 对此事件做出响应并在其内部更新状态,从而触发更新流程,包括 `updated()` 钩子的调用。 ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值