一、没有任何任何显示与隐藏限制条件的情况下:

1.运行的顺序依次是:

父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounted→父组件mounted;

二、当用v-show来控制子组件显示与隐藏的时候:

1.当用v-show='show',当show的默认值为true,执行顺序同上;

2.当用v-if='show',当show的默认值为true,执行顺序依然同上;

3.当用v-show='show',当show的默认值为false,无论在父组的生命周期(created,beforeMount)将show 变为true,执行的顺序依然如上;

5.当用v-show='show',当show的默认值为false,当在父组件的(mounted)生命周期将show变为true,执行顺序将会变为:父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounted→→父组件mounted→父组件beforeUpdated→父组件updated;;

4.当用v-if='show',当show的默认值为false,当在父组件的(created,beforeMount)生命周期将show变为true,执行顺序依然如上;

5.当用v-if='show',当show的默认值为false,当在父组件的(mounted)生命周期将show变为true,执行顺序将会变为:父组件created→父组件beforeMounted→父组件mounted→父组件beforeUpdated→子组件created→子组件beforeMounted→子组件mounted→父组件updated;

综上:1.vue项目里面在mounted以前的周期内的变化是不会触发updated的,只有在mounted才可以;

   2.希望当触发某个条件的时候再进行子组件渲染的时候,那就采用v-if吧,这也是v-if,v-show的区别之一吧;

vue中的父组件及子组件生命周期的执行顺序的更多相关文章

  1. 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

    首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...

  2. Vue 的父组件和子组件生命周期钩子执行顺序是什么

    加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-&g ...

  3. react教程 — 组件的生命周期 和 执行顺序

    一.组件执行的生命周期:                  参考  https://www.cnblogs.com/soyxiaobi/p/9559117.html  或  https://www.c ...

  4. VUE 父组件与子组件交互

    1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...

  5. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  6. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  9. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

随机推荐

  1. ORA-00904:&quot;T1&quot;.&quot;AREA_ID&quot; :标识符无效

    1.错误描写叙述 ORA-00904:"T1"."AREA_ID" :标识符无效 00904 . 00000 - "%s:invalid identi ...

  2. node.js下操作cookie

    cookie,又是cookie.工作中与cookie打交道很多次,不过时间跨度也大,每总结多一次,就加深了解多一点. cookie,一定是放在浏览器中的,用于浏览器保存一些小额度的内容.每次我们去访问 ...

  3. 尊重百度的api语音合成规则

    屏幕显示字幕内容与形式 和  字幕的播放时长分离 : 去除标点符号的影响 # 设置分句的标志符号:可以根据实际需要进行修改 # cutlist = ".!?".decode('ut ...

  4. ALSA声卡驱动中的DAPM详解之二:widget-具备路径和电源管理信息的kcontrol

    上一篇文章中,我们介绍了音频驱动中对基本控制单元的封装:kcontrol.利用kcontrol,我们可以完成对音频系统中的mixer,mux,音量控制,音效控制,以及各种开关量的控制,通过对各种kco ...

  5. Netlink通信机制【转】

    本文转载自:http://www.cnblogs.com/wenqiang/p/6306727.html 一.什么是Netlink通信机制  Netlink套接字是用以实现用户进程与内核进程通信的一种 ...

  6. The source was not found, but some or all event logs could not be searched. Inaccessible logs: Security.

    EventLog.SourceExists https://stackoverflow.com/questions/9564420/the-source-was-not-found-but-some- ...

  7. [Codeforces 485F] Oppa Funcan Style Remastered

    [题目链接] https://codeforces.com/contest/986/problem/F [算法] 不难发现 , 每个人都在且仅在一个简单环中 , 设这些环长的长度分别为 A1, A2 ...

  8. Filter,Interceptor和Aspect

    过滤器使用的主要是反射 :拦截器使用的主要是回调 :AOP使用的主要是动态代理. 一个请求过来 ,先进行过滤器处理,看程序是否受理该请求.过滤器放过后, 程序中的拦截器进行处理,处理完后进入被AOP动 ...

  9. Balanced Lineup(线段树)

    http://poj.org/problem?id=3264 题意:n个数,q个询问,输出[l,r]中最大值与最小值的差. #include <stdio.h> #include < ...

  10. flux,redux,vuex状态集管理工具之间的区别

    一:redux和flux的区别 1)redux是flux中的一个实现 2))在redux中我们只能定义一个store,在flux中我们可以定义多个 3)在redux中,store和dispatch都放 ...