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

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. 【独立开发人员er Cocos2d-x实战 009】Cocos2dx 菜单项CCMenu使用

    Cocos2dx中的菜单用CCMenu/Menu类来实现.该类是一个容器.用来装载各种菜单项,用于菜单项能够是图片.系统字体等. 理论就不说了.先上代码: CCMenuItemToggle* item ...

  2. 读写Word的组件DocX介绍与入门

    本文为转载内容: 文章原地址:http://www.cnblogs.com/asxinyu/archive/2013/02/22/2921861.html 开源Word读写组件DocX介绍与入门 阅读 ...

  3. 关于ZEDboard

    核心芯片:核心ZYNQ XC7Z020CLG484 双核Cortex-A9 MPcore.主频达到667MHz,板载512MB内存 12V@3A的电源适配器 使用的SD卡中预装了Linaro系统,这是 ...

  4. 算法题:打印1到最大的n位数

    说明:本文仅供学习交流,转载请标明出处,欢迎转载!        今天看到剑指offer上的第12题,题目例如以下:        输入数字n.按顺序打印出从1到最大的n位十位数. 比方输入3,则打印 ...

  5. E: Unable to lock the administration directory (/var/lib/dpkg/)

    如何修复 Ubuntu 中的“Unable to lock the administration directory (/var/lib/dpkg/)” 在 Ubuntu 或者它的衍生版如 Linux ...

  6. Kubernetes——基于容器技术的分布式架构领先方案,它的目标是管理跨多个主机的容器,提供基本的部署,维护以及运用伸缩

    1.Kubernetes介绍 1.1 简介 Kubernetes是什么?首先,它是一个全新的基于容器技术的分布式架构领先方案.其次,它是一个开放的开发平台.最后,它是一个完备的分布式系统支撑平台.Ku ...

  7. go语言笔记——包的概念本质上和java是一样的,通过大小写来区分private,fmt的Printf不就是嘛!

    示例 4.1 hello_world.go package main import "fmt" func main() { fmt.Println("hello, wor ...

  8. LuoguP4462 [CQOI2018]异或序列

    https://zybuluo.com/ysner/note/1124952 题面 给你一个大小为\(n\)的序列,然后给你一个数字\(k\),再给出\(m\)组询问,询问给出一个区间,问这个区间里面 ...

  9. 自动生成Makefile的全过程详解

    一.简介 Linux下的程序开发人员,一定都遇到过Makefile,用make命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile,如果要想写出一个符合自由软件惯例的 ...

  10. 新版chrome调整开发者工具位置方式改变

    转自:https://blog.csdn.net/gsls200808/article/details/70244150 本文所指新版56.0.2924.87 (64-bit) 原来F12可以看到窗口 ...