Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。
总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后
主要用到的是created函数(操作数据)和mounted函数(操作Dom)
BeforeCreated函数:
在beforeCreate阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。无法访问到数据和真实的dom
created函数:
在created阶段,vue实例的数据对象data有了,挂载元素el还没有。还没有真实的DOM
如果:数据的初始值就来自于后端,可以发送ajax,或者fetch请求获取数据,但是,此时不会触发updated函数
beforeMonute函数:
在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载为虚拟的dom节点
此时 this.$el有值,但是数据还没有挂载到页面上。即此时页面中的{{}}还没有被替换
当渲染好的页面元素被挂载到页面之前调用(拿不到有数据的DOM,指令什么样,拿到的还是原样的,并未解析),直白话:在这个阶段已经创建出html,可以拿到页面的dom,但是vm指令还未被解析,插值表达式并不会被解析<div>{{msg}}</div>,这个时候数据和指令还未结合
mounted函数:
DOM 渲染完成(模板编译完成),数据挂载完毕
即:此时已经把数据依据挂载到了页面上,所以,页面上能够看到正确的数据了。
beforeUpdate函数:
组件更新之前执行的函数
数据更新了,但是,vue(组件)对象对应的dom中的内部(innerHTML)没有变,所以叫作组件更新前
当有数据发生变化,但dom还未更新之前调用,此时如果访问dom,拿到的内容还是旧内容(页面上DOM中的内容发生了改变,beforeUpdate并不会立即更新)
updated函数:
当有数据发生变化,dom也更新完成之后调用,此时如果访问dom,拿到的就是新内容了(页面上DOM中的内容发生了变化,updated拿到的更新后的内容)
beforeDestroy函数:
立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等
destroyed函数:
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
(3)、第一次页面加载会触发哪几个钩子
答:第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
(4)、DOM 渲染在哪个周期中就已经完成
答:DOM 渲染在 mounted 中就已经完成了。