vue父子组件生命周期执行顺序
之前写了vue的生命周期，本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程，以及各个生命周期的特点。然而今天被问到父子组件生命周期执行顺序的时候一头雾水，根本不知道怎么回事。然后写了一段demo验证一下大佬们说的顺序。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<login></login>
</div> <script>
var login = {
template: '<h1>{{childMsg}}}</h1>',
data(){
return {
childMsg:'child'
}
},
beforeCreate: function () {
debugger;
console.log("子组件的beforeCreate")
},
created: function () {
debugger
console.log("子组件的created")
},
beforeMount: function () {
debugger
console.log("子组件的beforeMount")
},
mounted: function () {
debugger
console.log("子组件的mounted")
}
} var vm = new Vue({
el: '#app',
data: {
fatherMsg: "father"
},
methods: {},
components: {
login
},
beforeCreate: function () {
debugger
console.log("父组件的beforeCreate")
},
created: function () {
debugger
console.log("父组件的created")
},
beforeMount: function () {
debugger
console.log("父组件的beforeMount")
},
mounted: function () {
debugger
console.log("父组件的mounted")
},
});
</script>
</body> </html>
运行此代码，打开f12，进入sources里边
1.首先执行的是父组件的beforeCreate
2.执行的是父组件的created周期
3.执行的是父组件的beforeMount周期
4.执行的是子组件的beforeCreate周期
5.执行的是子组件的created周期
6.执行的是子组件的beforeMount周期
7.执行的是子组件的mounted周期
8.执行的是父组件的mounted周期
总结：
通过上边一步步的debugger，我们可以发现父子组件在加载的时候，执行的先后顺序为父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。
然后我们通过控制台打印的结果进一步证实了这个顺序。
vue父子组件生命周期执行顺序的更多相关文章
- Vue父子组件生命周期执行顺序及钩子函数的个人理解
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
- Vue相关，vue父子组件生命周期执行顺序。
一.实例代码 父组件: <template> <div id="parent"> <child></child> </div& ...
- vue父子组件生命周期函数执行顺序
vue父组件加载和销毁执行最后一个钩子函数之前先执行一遍子组件的钩子: 1.加载 父:beforecreate-created-beforeMount-(子:beforecreate-created- ...
- Vue父子组件生命周期
转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...
- vue 父子component生命周期
如今前端框架都流行组件化,页面元素都可以使用组件进行高度概括,那么处理组件之间的关系就如同处理页面架构一样重要.正确理解组件之间的关系,才能让代码按照我们与预料方式工作.最近参与了一个Vue.js的项 ...
- vue中父子组件钩子的执行顺序
我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件的生命周期的执行顺序是什么? 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父c ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
- activity生命周期分析（两个activity之间跳转的生命周期执行顺序）
NoteMainActivity点击跳转至NoteListActivity 我们都了解: 当A界面点击进入B界面时,此时 A===onPause--->onStop ...
- Vue父子组件生命过程
加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
随机推荐
- CDH集成Kafka,两种方式：离线、在线
1.离线 先下载相应版本的kafka http://archive.cloudera.com/kafka/parcels/ 然后放置相应目录,如下图: 然后直接添加组件即可 2.在线 配置相应的kaf ...
- zabbix proxy
ProxyMode=0 Server=zabbix-server的IPHostname=zabbix proxy(跟在zabbixWED网页建立代理proxies名称一样) LogFile=/data ...
- jcrop2.X 取消选框
(原) 官网 0.9.12 API 2.X API 在2.X以下在版本中,api提供了release()方法用于取消选框.但在2.X以上的版本中已经没有这个方法了.于是各种查找,终于解决了如何取消选框 ...
- CentOS7.x安装kickstart
kickstart简介 kickstartkickstart是RedHat公司开源的软件,所以对CentOS兼容性最好,是一种无人值守的安装方式就是将手动安装配置的步骤,记录到文件中,然后通过kick ...
- React 精要面试题讲解(一) 单向数据流
react 单向数据流概念 'react框架是怎样的数据流向?'||'react单向数据流是怎样的概念 ?' 解答这个问题之前,我们首先得知道,js框架是个怎样的概念. 框架:具备一定**编程思想** ...
- opendir函数和readdir函数内涵及用法
工作中遇到奇怪的事,加载增量的时候加载不上.于是开始分析原因,log里边没有任何错误信息,只有加载完成的标志.增量的数据在目录里边是存在的,但是显示的目录大小却不是4096,而是17,不知道为什么.后 ...
- java中String的final类原因
public final class String implements java.io.Serializable, Comparable<String>, CharSequence { ...
- JS confirm或alert对话框中的换行
如题. alert.confirm对话框的换行可以使用回车符或换行符:\n,\r 也可以使用回车符或换行符对应的unicode编码:\u000a,\u000d,这是等效的. //确认信息 var co ...
- CentOS 安装 Ansible 以及连接Windows server的办法
1. CentOS机器上面按住那ansible yum install ansible 2. 安装 pywinrm 如果不安装 这个的话 ansible 会提示 没有 winrm 模块 注意需要先 ...
- RedisCache 缓存
/// <summary> /// 这是包装过公用的,用于本站而已. /// </summary> /// <author>rixiao</author> ...