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= "< ...
随机推荐
- Unicode不可见字符的显示
Unicode的学名是”Universal Multiple-Octet Coded Character Set”,简称为UCS 不可见字符”/u200b”为 Unicode Character ‘Z ...
- 《转》OpenStack对象存储——Swift
OpenStack Object Storage(Swift)是OpenStack开源云计算项目的子项目之中的一个.被称为对象存储.提供了强大的扩展性.冗余和持久性.本文将从架构.原理和实践等几方面讲 ...
- LeetCode总结--二分查找篇
二分查找算法尽管简单,但面试中也比較常见.经经常使用来在有序的数列查找某个特定的位置.在LeetCode用到此算法的主要题目有: Search Insert Position Search for a ...
- E - 吃糖
题目描述: 某人买了n兜糖果,第i兜有Ai块糖.此人把所有这些糖果用一个数字标记起来:他这样标记这些糖,第一袋糖用用数字1到A1,第二袋糖用数字A1+1到A1+A2,如此类推.如果还没明白看样例可以更 ...
- ssh连接超时问题解决方案,每一种方案都可以
1.服务端修改 vim /etc/ssh/sshd_config 修改 ClientAliveInterval 60 ClientAliveCountMax 40 60秒,向客户端发送一次请求. 超过 ...
- PCB SQL SERVER 字段模糊匹配个数 实现方法
今天工程系统给到加投加投组件的数据规则修改,遇到需将一个字段模糊匹配的个数统计 这类需求要平时应该很少遇到了,这里将此方法分享出来, 一.需求如下 例子:itempara字段中的内容是: IVH板 铜 ...
- Applications(模拟)
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3705 题意:主要是分值计算要注意以下几点: (1) 在MOJ上解出的题,如 ...
- 51nod1446 Kirchhoff矩阵+Gauss消元+容斥+折半DFS
思路: //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> using ...
- [转]HTML5 Day 4: Add Drop Down Menu to ASP.NET MVC HTML5 Template using CSS and jQuery
本文转自:http://pietschsoft.com/post/2010/11/17/HTML5-Day-4-Add-DropDown-Menu-ASPNET-MVC-HTML5-Template- ...
- C# 将结构体转为字节流的方式
1. 将基础类型转为byte数组存储 private byte[] CreateNetDataByteStream(ushort system, ushort host, ushort type, b ...