加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

补充钩子函数的执行顺序

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

errorCaptured

总结：

1.beforeCreate执行时：data和el均未初始化，值为undefined

2.created执行时：Vue 实例观察的数据对象data已经配置好，已经可以得到data的值，但Vue 实例使用的根 DOM 元素el还未初始化

3.beforeMount执行时：data和el均已经初始化，但此时el并没有渲染进数据，el的值为“虚拟”的元素节点

4.mounted执行时：此时el已经渲染完成并挂载到实例上

5.beforeUpdate和updated触发时，el中的数据都已经渲染完成，但只有updated钩子被调用时候，组件dom才被更新。

思考：

1.在created钩子中可以对data数据进行操作，这个时候可以进行数据请求将返回的数据赋给data

2.在mounted钩子对挂载的dom进行操作，此时，DOM已经被渲染到页面上。

3.虽然updated函数会在数据变化时被触发，但却不能准确的判断是那个属性值被改变，所以在实际情况中用computed或match函数来监听属性的变化，并做一些其他的操作。

4.所有的生命周期钩子自动绑定 this 上下文到实例中，所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是导致this指向父级。

5.在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子触发。

Vue生命周期钩子函数加载顺序的理解

Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

Vue父子组件生命周期

转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

Vue生命周期 钩子函数和组件传值

Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

vue 页面回退mounted函数不执行的问题及解决方法

前言 最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新 经过一番面向百度研究,终于找到了问题所在.接下来就记录一下这 ...

VueRouter和Vue生命周期(钩子函数)

一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

unity3D技术之事件函数的执行顺序[转]

unity3D技术之事件函数的执行顺序 转自http://www.yxkfw.com/?p=13703   在unity的脚本,有大量的脚本执行按照预先确定的顺序执行的事件函数.此执行顺序说明如下: ...

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

vue父子组件传值加例子

例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

一个故事讲懂vue父子组件传值

作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...

随机推荐

keytool的使用

1. 创建数字证书 keytool -genkey -v -alias scent -dname "CN=John,OU=MNG,O=Corp,L=Hangzhou,ST=Zhejiang, ...

C++和python使用struct传输二进制数据结构来实现

网络编程问题往往涉及二进制数据的传输.在C++经常使用的传输是文本字符串和分组结构. 假设该数据可以预先送入连续的内存区域,然后让send函数来获得的第一个地址,这一块连续的内存区就能完成传输数据.文 ...

Java-hibernate的映射文件

Hibernate 需要知道怎样去加载(load)和存储(store)持久化类的对象.这正是 Hibernate 映 射文件发挥作用的地方.映射文件告诉 Hibernate 它应该访问数据库(data ...

IOS开发－UI学习－delegate(代理)的使用，键盘消失

代理是IOS开发中用到的一种设计模式.今天做了一个代理的小练习: 以下项目实现了两个页面之间的相互切换,并且在切换页面的时候完成了从一个页面往另一个页面的传值.从主页面往其他页面传值是容易的,但是反过 ...

将常用的Android adb shell 命令行封装为C#静态函数

更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 简介:adb命令是常用的Android命令行,自动化.代码调试.手工排查问题都会用的到,这里将常用的一些命令行封装 ...

Leetcode_12_Integer to Roman

本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42744649 Given an integer, conv ...

P1967 货车运输

P1967 货车运输最大生成树+lca+并查集 #include #include #include #inclu ...

Linux环境变量设置/etc/profile、/etc/bashrc、~/.profile、~/.bashrc区别

登入系统读取步骤: 当登入系统时候获得一个shell进程时,其读取环境设定档有三步 : 1.首先读入的是全局环境变量设定档/etc/profile,然后根据其内容读取额外的设定的文档,如 /etc/p ...

u-boot全面分析

uboot主Makefile分析1 uboot住Makefile分析参考:https://www.2cto.com/kf/201607/522424.html uboot version确定(Make ...

图解http学习笔记【一】

不想单纯的把书里的知识点罗列一遍 这周,我们的安全代码终于改完了.我在微信上报了个叫 一修读书的课程,现在已经听了6天.感觉并不是很神奇,聊胜于无.倒是趁着当当搞活动买回来好几本书,其中就有这本图解h ...