Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法。
问题如下:请问下图中父子组件执行的先后顺序?

首先,我想先谈一谈vue的生命周期。我个人认为,从一个实例对象被创建到实例对象被销毁的过程就是该对象的生命周期。那么到底这个生命周期分为哪几个部分呢?依次为:beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestory -> destoryed。该过程是严格按照先后顺序来执行的,在每一个生命周期阶段内,我们都会相应的做一些事情,具体哪个环节可以执行什么操作这个我准备放到后续的文章中进行分析,今天我们主要来探讨一下,上图中父组件与子组件的执行先后顺序。
Vue中,专注于组件式开发,我认为一个组件可以是一个小小的功能模块,也可以是某一个完整的页面,至于具体是什么,这就取决你的需求。那么在开发过程中,父子组件的嵌套、父子组件执行的先后顺序肯定是不可避免的。总结归纳之后,得出以下结论:在组件开始生成到结束生成的过程中,如果该组件还包含子组件,则自己开始生成后,要让所有的子组件也开始生成,然后自己就等着,直到所有的子组件生成完毕,自己再结束。所以上图中。“父亲”先开始自己的created,然后“儿子”开始自己的created和mounted,最后“父亲”再执行自己的mounted。
Vue中父子组件执行的先后顺序探讨的更多相关文章
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- 简述vue中父子组件是怎样相互传递值的(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- vue中父子组件钩子的执行顺序
我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件的生命周期的执行顺序是什么? 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父c ...
- vue 中父子组件之间的交互
1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue中父子组件传递信息实现
为了能够在父子组件中实现双向控制,需要以下的步骤: 第一步:子组件中挖坑 (1)在需要父组件填充具体内容的地方挖坑,方式为 <slot name="message">& ...
- vue 中父子组件传值:props和$emit
更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...
- vue之父子组件执行对方的方法
一.子组件执行父组件中的方法 1.父组件将方法名传给子组件,子组件进行调用 父组件中: <Vbutton typeBtn="success" :btnUserMethod=& ...
- Vue中父子组件通讯——组件todolist
一.todolist功能开发 <div id="root"> <div> <input type="text" v-model=& ...
随机推荐
- U3D优化
容易忽略的美术资源的优化: 优化的美术制作真是一种感觉和经验的积累,能看出制作水平的不是做的效果多么犀利,而是得看制作的效果与对机器的要求等的性价比. 关于合并: 100个三角形的MESH,在渲染时 ...
- [XPath] XPath 与 lxml (二)XPath 语法
XPath 选取节点时使用的表达式是一种路径表达式.节点是通过路径(path)或者步(steps)来选取的. 本章使用以下 XML 文档作为示例. <?xml version="1.0 ...
- python --葵花宝典
1.python 函数 定义 ---def() def fun(): print(“我是小甲鱼!!”) 调用函数 a =fun() print (a) 即可 ,注:函数调用是由上而下: 2.pyt ...
- linux下c语言获取当前时间
和时间有关的函数定义在头文件”time.h”中 常用函数: time_t time(time_t *t); 函数说明:此函数会返回从公元 1970 年1 月1 日的UTC 时间从0 时0 分0 秒算起 ...
- MVC项目的简单总结
不能说是庆幸吧,正赶上公司要开发一个小小的MVC项目,于是这样任务就只有我自己承担,在这个项目中我才彻底感觉到自己之前有关MVC知识的无知,以为接触了皮毛就感觉能做项目,只要有心动脑思考就能完成一个完 ...
- C 预处理
http://baike.baidu.com/link?url=0mwKZRcxHuNHa_TiwXgpQPS2S-YbOGCUJVSgZ9sb-qe-G-x4oIDZpWuZqiVNBsMYA4HT ...
- 【Java并发编程四】关卡
一.什么是关卡? 关卡类似于闭锁,它们都能阻塞一组线程,直到某些事件发生. 关卡和闭锁关键的不同在于,所有线程必须同时到达关卡点,才能继续处理.闭锁等待的是事件,关卡等待的是其他线程. 二.Cycli ...
- PHP中常见问题总结
[1]页面之间无法传递变量 get,post,session在最新的php版本中自动全局变量是关闭的,所以要从上一页面取得提交过来得变量要使用$_GET['foo'],$_POST['foo'],$_ ...
- try except与try finally不同之处
try except与try finally不同之处 try//尝试执行 {SomeCode} except//出错的时候执行, Except有特定的错误类型 {SomeCode} end; t ...
- 三元组顺序结构实现稀疏矩阵相加,行序优先(Java语言描述)
不用十字链表也可以稀疏矩阵相加时间复杂度最坏情况达到O(tuA + tuB);思路比较简单就不赘述了,代码如下: 三元组: package 行逻辑链接的顺序表实现稀疏矩阵的相乘; public cla ...