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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
javascript的函数作用域
2014/11/12 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python中的yield from语法快速学习
2020/11/06 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
一道写SQL的面试题和答案
2013/11/19 面试题
安全生产计划书
2014/05/04 职场文书
停车位租赁协议书
2014/09/24 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
高中数学教学反思范文
2016/02/18 职场文书
市场营销计划书
2019/04/24 职场文书
Python实现拼音转换
2021/06/07 Python