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= "< ...
随机推荐
- C#使用oledb连接excel运行Insert Into语句出现“操作必须使用一个可更新的查询”的解决的方法
我错误发生时的环境:Windows 7,Framework 4.0,Microsoft Office 2007,VS2010,c# WinForm. 部分代码: string strConn = &q ...
- swift 2.0 语法 分支
import UIKit // 注意: Swift中可以不写;号, 但是有一定的前提条件, 一行只有一句代码 // 如果一行有多句代码, 那么;还是必须写 // 注意: Swift变态的地方 ...
- Android对方向感应器的封装调用
Android自动的SensorManager使用起来已经很方便,但由于一些情况我们希望对其中的功能进行封装: 只使用个别的sensor,功能相对单一 要对sensor返回的raw data进行算法处 ...
- 怎样对Android设备进行网络抓包
问题描写叙述: 前段时间自己的app訪问server的url总是会出现间接性失败的问题,于是和server的同事开了个会.提出了他们server存在的这个bug,我的同事自然说自己的server没问题 ...
- BestCoder Round #61 (div.2) C.Subtrees dfs
Subtrees 问题描述 一棵有N个节点的完全二叉树,问有多少种子树所包含的节点数量不同. 输入描述 输入有多组数据,不超过1000组. 每组数据输入一行包含一个整数N.(1\leq N\leq ...
- springmvc20170322
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" ...
- Robot Framework 搭建和RIDE(GUI) 的环境
在windows x64的环境上进行安装,集成Selenium2和AutoIt的libraries,以下安装步骤在win 7,win 8.1,win 10, win 2012 R2上测试通过 1. 下 ...
- tiny4412学习(四)之移植linux-设备树(1)设备树基础知识及GPIO中断【转】
本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/74177978 版权声明:本文为博主原创文章,转载请注明http://blog.c ...
- 【BZOJ 3032】 七夕祭
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3032 [算法] 交换左右两个相邻格子的摊点,不会改变这一行的摊点个数 交换上下两个相 ...
- 01_ndk目录介绍
精力都放在安卓上.所以说呢C这个东西不要纠结太多,对大家的要求就是能看懂,会调用. Java的特点是一处编译到处运行,跨平台.优势是比native语言强,一处编译到处运行.native语言的劣势是不能 ...