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在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 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整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
Python lxml模块安装教程
2015/06/02 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python flask 多对多表查询功能
2017/06/25 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Python lambda表达式用法实例分析
2018/12/25 Python
python程序 创建多线程过程详解
2019/09/23 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
理发店策划方案
2014/06/05 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript