宝哥软件园

vue同步父子组件和异步父子组件的生命周期顺序问题

编辑:宝哥软件园 来源:互联网 时间:2021-08-29

关于某视频剪辑软件组件的引入方式有两种

一、同步引入

例子:从"@/组件/页面"导入页面

二、异步引入

例子:常量页面=()=导入(@/组件/页面)

或者:常量页=解析=要求([' @/组件/页'],页)

两种引入方式的不同之处在于:

同步引入时生命周期顺序为:父组件的安装前、创建前、安装前-所有子组件的安装前、创建前、安装前-所有子组件的安装的父组件的安装好的

例子:

!- App.vue -模板div id='app' New /!-子组件一- Page /!-子组件二-路由器-从"@/组件/页面"//查看//div/模板脚本导入页面同步方式引入从"@/组件/新"导入新内容导出默认{名称: '应用',组件: {页面,新},beforeCreate () { console.log('父组件App - App beforeCreate') },created () { console.log('父组件应用-应用已创建')},已装载(){ console.log('父组件App-App mount ')},beforeMount () { console.log('父组件App-安装前的App ')} }/脚本/脚本!新的。vue-模板分区p这是一个新组件/p/div/templatescript导出默认值{ name : ' new ',created () { console.log('子组件new - new created') },beforeCreate () { console.log('子组件new - new beforeCreate') },mounted () { console.log('子组件new-new mount ')},beforeMount () { console.log('子组件new - new beforeMount') }}/script!-佩奇。vue-模板分区作业/p这是一个页面组件/p /div/templatescriptimport作业从@/组件/作业'导出默认{ name: 'page ',components: { Job,},beforeCreate () { console.log('子组件page - page beforeCreate') },created () { console.log('子组件page - page created') },mounted () { console.log('子组件page-page mount ')},beforeMount () { console.log('子组件page-page BeforeMount ')} }/script!-工作。vue-模板分区p这是一个作业组件,在page.vue/p/div/templatescriptexport中默认{ name:“作业”,已创建(){ console.log('孙组件job - job created') },beforeCreate () { console.log('孙组件job - job beforeCreate') },mounted () { console.log('孙组件job-job mount ')},beforeMount () { console.log('孙组件job-装载前的作业')} }/script在这里插入图片描述

异步引入时生命周期顺序:父组件的在创建、创建、安装、安装之前-子组件的在创建、创建、安装、挂载之前

在上面的代码只需要修改引入的方式:

从"@/组件/页面"//导入页面同步方式引入从' @/组件/新的'导入作业'导入新的' @/组件/作业'改为:

const Page=()=import(' @/components/Page ')//异步引入const New=()=导入(' @组件/新建')const Job=()=导入(' @/组件/作业'结果:

在这里插入图片描述

总结

以上所述是小编给大家介绍的某视频剪辑软件同步父子组件和异步父子组件的生命周期顺序问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

更多资讯
游戏推荐
更多+