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-& ...
随机推荐
- Elimination Game题解
Elimination Game 这道题目出于leetcode,题目虽然很简单但是很有趣,因为有趣才能称得上游戏吧! 0x00 题目介绍 简单介绍一下题目意思 给定一个数字N(N>0),一个列表 ...
- .NET Core 图片操作在 Linux/Docker 下的坑
一.前言 .NET Core 目前更新到2.2了,但是直到现在在 .NET Core 本身依然不包括和图片有关的 Image.Bitmap 等类型.对于图片的操作在我们开发中很常见,比如:生成验证码. ...
- 使用 ng build 构建后资源地址引用错误的问题
最近使用 Angular 做项目的时候,通过 ng build 打包后的资源地址都带有 localhost:4200,百思不得其解,以为是打包的问题. 最后在 index.html 的文件中发现有一个 ...
- DAO层设计Junit测试
DAO层的设计: 在实际的开发中有一种项目的程序组织架构方案叫做MVC模式. MVC模式就是按照程序的功能将它们分成三层,分别是Modle层 (模型层).View(显示层).Controller(控制 ...
- c++ 重点随记
1.在公有继承中:(1).派生类对象储存了基类的私有成员 (2).派生类对象可以使用基类的方法 (3).基类引用可以引用派生类对象,派生类引用不可以引用基类对象 2.基类引用引用派生类对象时:若基类引 ...
- Java 关于cannot resolve symbol 'log'报错问题
我用的是IDEA,报错的内容是:cannot resolve symbol 'log' 如图所示: 解决方法: 1.安装插件:Settings→Plugins,输入lom回车: 2.然后选择Insta ...
- mycat入门--数据库分片
配置mycat的用户名和密码: 连接mycat,就像连接mysql一样:
- Django-5 模板层
Django 模板层 在之前的例子中,我们采用了硬编码的方式,来返回文本 def current_datetime(request): now = datetime.datetime.now() ht ...
- Quill 富文本编辑器
Quill 富文本编辑器 https://quilljs.com/ https://github.com/quilljs/quill https://github.com/quilljs/awesom ...
- miui 系统铃声
MIUI7-8系统铃声和通知铃声等,从miui system.img中提取出来的: 链接:http://pan.baidu.com/s/1bpH5N5P 密码:tz7p