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-& ...
随机推荐
- 力扣算法题—093复原IP地址
给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135", ...
- Visual Studio 2019 正式版 更新内容
大早上更新了Visual Studio 2019, 试用一下 一.界面改变 1.项目创建界面 首先启动界面改变就不说了,创建项目的界面做了较大改变,感觉在向vs for mac 靠拢 ,而后者感觉像x ...
- C语言之输入月收入，输出该月应纳税额-2019(简易版)
#include<stdio.h> #include<stdlib.h> #include<string.h> #define s1 0.03 //税率b < ...
- 【git】git hello world
以前不怎么会用. http://blog.sina.com.cn/s/blog_1485511700102xdig.html git add 文件夹/ 添加整个文件夹及内容 gi ...
- Ubuntu18.04LTS安装Nvidia显卡
笔者在为Ubuntu18.04LTS安装Nvidia显卡驱动之前,早就听说了一系列关于由于Nvidia驱动引起的疑难杂症.选择高质量的教程并保持足够的耐心,就能解 决这些问题.很重要的一点,不要怕把电 ...
- servlet（1）
servlet类分级: 1.ServletConfig接口类:理解为读取servlet配置的类,里面有四个抽象方法如下: ①getServletName:获取servlet在web.xml中的名字 ② ...
- setData 和 直接赋值的区别
wxml: <view> <block wx:for="{{dataArray}}" wx:key="id"> <v-book b ...
- MarkDown&思维导图
从markdown文件创建思维导图 pzhaonet/mindr: an R package which converts markdown files (.md, .Rmd) into mindma ...
- List根据对象的两个字段进行排序，并且有一个倒序
用java8 的lambda 表达式 list.sort(Comparator.comparing(Live::getId) .thenComparing(Live::getAppId, Compar ...
- word 2013 标题设置多级列表
1.问题 要设置标题为多级列表,批量应用 2.解决 1选标题1 2选标题2 ...以此类推.点确定保存即可