vue中的父组件及子组件生命周期的执行顺序


一、没有任何任何显示与隐藏限制条件的情况下:
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中的父组件及子组件生命周期的执行顺序的更多相关文章
- 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序
首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...
- Vue 的父组件和子组件生命周期钩子执行顺序是什么
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-&g ...
- react教程 — 组件的生命周期 和 执行顺序
一.组件执行的生命周期: 参考 https://www.cnblogs.com/soyxiaobi/p/9559117.html 或 https://www.c ...
- VUE 父组件与子组件交互
1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...
- Vue中,父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...
随机推荐
- 【Spring四】AOP之XML配置
AOP:Aspect Oriented Programming 面向切面编程 面向切面编程的核心是动态代理设计模式.请先參见动态代理设计模式笔记. 以Hibernate保存一个对象到数据库为例,因为 ...
- 工作总结 c#如何将两个List集合合并
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- how to use webpart container in kentico
https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-w ...
- seq2seq里的数学
seq2seq模型详解 原创 2017年12月25日 09:41:04 标签: seq2seq / 自然语言 / 机器人 在李纪为博士的毕业论文中提到,基于生成的闲聊机器人中,seq2seq是一种 ...
- 如何根据configure.ac和Makefile.am为开源代码产生当前平台的Makefile
1 2 3 4 5 6 7 8 9 //根据configure.in和Makefile.am生成makefile的步骤,基于UBUNTU 12.04 1.autoscan (可选) 2.aclocal ...
- 红黑树插入操作原理及java实现
红黑树是一种二叉平衡查找树,每个结点上有一个存储位来表示结点的颜色,可以是RED或BLACK.红黑树具有以下性质: (1) 每个结点是红色或是黑色 (2) 根结点是黑色的 (3) 如果一个结点是红色的 ...
- Java 集合 ArrayList 需要知道的几个问题
问:Arraylist 的动态扩容机制是如何自动增加的?简单说说你理解的流程? 答:当在 ArrayList 中增加一个对象时 Java 会去检查 Arraylist 以确保已存在的数组中有足够的容量 ...
- ACM_最值差(线段树区间查询最值)
最值差 Time Limit: 2000/1000ms (Java/Others) Problem Description: 给定N个数A1A2A3A4...AN.求任意区间Ai到Aj中的最大数与最小 ...
- hibernate.cfg.xml配置
hibernate.hbm2ddl.auto 配置: create:每次加载hibernate时都会删除上一次的生成的表,然后根据你的model类再重新来生成新表,哪怕两次没有任何改变也要这样执行,这 ...
- wampserver修改mysql数据库密码的简单方式
刚装好的wampserver的数据库是没有密码的,所以可以直接登录,要设置密码,一种简单的方式如下: 打开phpMyadmin 初始状态没有密码,可以直接登录 登录之后,点击账户 点击修改权限,设置你 ...