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


Posted in Javascript onOctober 07, 2018

关于vue组件的引入方式有两种

一、 同步引入

例子: import Page from '@/components/page'

二、异步引入

例子:const Page = () => import('@/components/page')

或者: const Page = resolve => require(['@/components/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 '@/components/page' // 同步方式引入
import New from '@/components/new'
export default {
 name: 'App',
 components: {
  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 component</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 component</p>
 </div>
</template>

<script>
import Job from '@/components/job'
export default {
 name: 'page',
 components: {
 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 component, 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>

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

异步引入时生命周期顺序:父组件的beforeCreate、created、beforeMount、mounted --> 子组件的beforeCreate、created、beforeMount、mounted

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

import Page from '@/components/page' // 同步方式引入
import New from '@/components/new'
import Job from '@/components/job'

改为:

const Page = () => import ('@/components/page') // 异步引入
const New = () => import ('@components/new')
const Job = () => import ('@/components/job'

结果:

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

总结

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

Javascript 相关文章推荐
javascript调试说明
Jun 07 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
js中生成map对象的方法
Jan 09 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
Vue面试题及Vue知识点整理
Oct 07 #Javascript
解决vue无法设置滚动位置的问题
Oct 07 #Javascript
cdn模式下vue的基本用法详解
Oct 07 #Javascript
vue实现添加与删除图书功能
Oct 07 #Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 #Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 #Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 #Javascript
You might like
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python常用排序算法的实现代码
2019/11/08 Python
Python运行异常管理解决方案
2020/03/09 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
C有"按引用传递"吗
2016/09/06 面试题
求职信范文怎么写
2014/01/29 职场文书
小学班级口号
2014/06/09 职场文书
社团活动总结书
2014/06/27 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
入团申请书格式
2019/06/20 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
go设置多个GOPATH的方式
2021/05/05 Golang
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
python如何正确使用yield
2021/05/21 Python