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

  问题如下:请问下图中父子组件执行的先后顺序?

  首先,我想先谈一谈vue的生命周期。我个人认为,从一个实例对象被创建到实例对象被销毁的过程就是该对象的生命周期。那么到底这个生命周期分为哪几个部分呢?依次为:beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestory -> destoryed。该过程是严格按照先后顺序来执行的,在每一个生命周期阶段内,我们都会相应的做一些事情,具体哪个环节可以执行什么操作这个我准备放到后续的文章中进行分析,今天我们主要来探讨一下,上图中父组件与子组件的执行先后顺序。

  Vue中,专注于组件式开发,我认为一个组件可以是一个小小的功能模块,也可以是某一个完整的页面,至于具体是什么,这就取决你的需求。那么在开发过程中,父子组件的嵌套、父子组件执行的先后顺序肯定是不可避免的。总结归纳之后,得出以下结论:在组件开始生成到结束生成的过程中,如果该组件还包含子组件,则自己开始生成后,要让所有的子组件也开始生成,然后自己就等着,直到所有的子组件生成完毕,自己再结束。所以上图中。“父亲”先开始自己的created,然后“儿子”开始自己的created和mounted,最后“父亲”再执行自己的mounted。

  

Vue中父子组件执行的先后顺序探讨的更多相关文章

  1. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  2. 简述vue中父子组件是怎样相互传递值的(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  3. vue中父子组件钩子的执行顺序

    我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件的生命周期的执行顺序是什么? 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父c ...

  4. vue 中父子组件之间的交互

    1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...

  5. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  6. vue中父子组件传递信息实现

    为了能够在父子组件中实现双向控制,需要以下的步骤: 第一步:子组件中挖坑 (1)在需要父组件填充具体内容的地方挖坑,方式为 <slot name="message">& ...

  7. vue 中父子组件传值:props和$emit

    更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

  8. vue之父子组件执行对方的方法

    一.子组件执行父组件中的方法 1.父组件将方法名传给子组件,子组件进行调用 父组件中: <Vbutton typeBtn="success" :btnUserMethod=& ...

  9. Vue中父子组件通讯——组件todolist

    一.todolist功能开发 <div id="root"> <div> <input type="text" v-model=& ...

随机推荐

  1. ubuntu 手动安装mysql

    申请了一台云主机,需要手动安装所有环境,今天将mysql安装过程记下. 安装mysqla. 下载不了gcc, 需要先运行apt-get updateb. cmake报错,每次要先删除cmakeCach ...

  2. 脚本控制animation的事件

    由于动作设计经常修改动作,所以每次改完都要再添加一次animation的事件,所以就直接写了个脚本,当然以后可以做成表格,然后用脚本从表格中读取,然后生成对应的animation事件.在Assets/ ...

  3. iOS开发——iOS7(及以后版本) SDK自带二维码(含条形码)扫码、二维码生成

    本文转载至 http://www.cnblogs.com/leotangcn/p/4357907.html 现在很多APP都涉及了二维码扫码功能,这个功能简单实用,很多情况下用户乐于使用,现在本文带来 ...

  4. 在linux下如何判断是否已经安装某个软件?

    如果你使用rpm -ivh matlab装的,用rpm -qa | grep matlab肯定是能够找到的. 如果你是用make && make install装的.那么最好直接去找执 ...

  5. 使用kendynet构建异步redis访问服务

    使用kendynet构建异步redis访问服务 最近开始在kendynet上开发手游服务端,游戏类型是生存挑战类的,要存储的数据结构和类型都比较简单,于是选择了用redis做存储,数据类型使用stri ...

  6. 【IE兼容问题】记一次Manifest因为jquery版本不同导致的兼容问题解决方案X-UA-Compatible

    最近在调试一个jquery插件Manifest 测试过程中发现IE一直不能完全展示这个插件,只显示了一个textbox文本框 IE下的bug的效果图 其他浏览器正常的效果图 跟踪原因,IE下jquer ...

  7. [OpenGL]用OpenGL制作动画

    //在窗口内绘制一个移动的矩形 /*我们通常还可以用OpenGL程序创建动画效果,这里我们利用前面的例子,绘制正方形,并使这个正方形在窗口的边框反弹.这里需要创建一个循环,在每次调用显示回调函数之前改 ...

  8. canvas练习 - 七巧板绘制

    用到的方法: 注意点: stokeStyle等样式要在stroke前边 如果最后只有一个stroke或者fill,那么只填充最后一次路径的,之前的也会画出来但是没有填充看不到.所以每次begin+cl ...

  9. 浏览器缓存机制介绍 + 常用 http 状态码

    浏览器缓存分为两种, 强制缓存  与  协商缓存, https://www.pass4lead.com/300-209.htmlhttps://www.pass4lead.com/300-320.ht ...

  10. css3整理--rgba

    rgba语法: rgba(0, 0, 0,0.5); 第一个参数:R 红色(0-255) 第二个参数:G 绿色(0-255) 第三个参数:B 蓝色(0-255) 第四个参数:透明度(0-1)使用rgb ...