vue同步父子组件和异步父子组件的生命周期顺序
网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了vue同步父子组件和异步父子组件的生命周期顺序问题,需要的朋友可以参考下
关于vue组件的引入方式有两种
一、 同步引入
例子: import Page from
二、异步引入
例子:const Page = () => import()
或者: const Page = resolve => require(['@/ponents/page'], page)
两种引入方式的不同之处在于:
同步引入时生命周期顺序为:父组件的beforeMount、created、beforeMount --> 所有子组件的beforeMount、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted
例子:
<! -- App.vue --> <template> <div id="app"> <New /> <!-- 子组件一 --> <Page /> <!-- 子组件二 --> <router-view/> </div> </template> <script> import Page from '@/ponents/page' // 同步方式引入 import New from '@/ponents/new' export default { name: 'App', ponents: { Page, New }, beforeCreate () { console.log('父组件App -------> App beforeCreate') }, created () { console.log('父组件App -------> App created') }, mounted () { console.log('父组件App -------> App mounted') }, beforeMount () { console.log('父组件App -------> App beforeMount') } } </script> </script> <!-- new.vue --> <template> <div> <p>this is a new ponent</p> </div> </template> <script> export default { name: 'new', created () { console.log('子组件new ----> new created') }, beforeCreate () { console.log('子组件new ----> new beforeCreate') }, mounted () { console.log('子组件new ----> new mounted') }, beforeMount () { console.log('子组件new ----> new beforeMount') } } </script> <!-- page.vue--> <template> <div> <Job /> <p>this is a page ponent</p> </div> </template> <script> import Job from '@/ponents/job' export default { name: 'page', ponents: { Job, }, beforeCreate () { console.log('子组件page ----> page beforeCreate') }, created () { console.log('子组件page ----> page created') }, mounted () { console.log('子组件page ----> page mounted') }, beforeMount () { console.log('子组件page ----> page beforeMount') } } </script> <!-- job.vue --> <template> <div> <p>this is a job ponent, in page.vue</p> </div> </template> <script> export default { name: 'job', created () { console.log('孙组件job ------> job created') }, beforeCreate () { console.log('孙组件job ------> job beforeCreate') }, mounted () { console.log('孙组件job ------> job mounted') }, beforeMount () { console.log('孙组件job ------> job beforeMount') } } </script>
异步引入时生命周期顺序:父组件的beforeCreate、created、beforeMount、mounted --> 子组件的beforeCreate、created、beforeMount、mounted
在上面的代码只需要修改引入的方式:
import Page from '@/ponents/page' // 同步方式引入 import New from '@/ponents/new' import Job from '@/ponents/job'
改为:
const Page = () => import ('@/ponents/page') // 异步引入 const New = () => import ('@ponents/new') const Job = () => import ('@/ponents/job'
结果:
总结
以上所述是长沙网络推广给大家介绍的vue同步父子组件和异步父子组件的生命周期顺序问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,长沙网络推广会及时回复大家的!
上一篇:微信小程序wx:for循环的实例详解
下一篇:Vue面试题及Vue知识点整理
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程