vue生命周期的浅析

1、vue的生命周期

也是vue的自带钩子函数

生命周期中可以进行操作的节点

首次可以进行ajax通信的节点 — beforeCreate

获取vue属性、方法的节点 — created

设置初始化属性与方法 — created

子组件peops获取父组件传入的属性节点 — created

获取第一次渲染的dom元素 — mounted

获取当前组件中注册(ref)的子组件或元素 — mounted

ajax的最佳通信时机 — mounted

获取更新前dom元素的节点 — beforeUpdate

获取更新后dom元素的节点 — updated

beforeCreate

实例化对象开始初始化创建，他不能访问实例化对象中的数据，因为还未创建，和进行代理。

用处

1、初始化渲染数据的设置

那么可以在这个生命周期进行初始化值的设置，但是他并没有放在data中，所以并不具有响应特性，他只是在第一次初始化的时候进行初始化设置

2、访问到未解析的模板

3、可以进行ajax操作

他是最早调用ajax请求的钩子函数，存在数据请求回来，但是页面并未渲染完成，概率几乎为零。

不能做的行为

1、他不能获取到初始的data数据、methods方法

2、只能获取到未渲染之前的dom元素

created

在vue实例化对象创建完成后调用的钩子函数，此时data、methods方法已经创建完成，但是dom还未进行渲染

用处

1、可以修改data等vue对象的属性方法，用于渲染页面等操作

2、进行ajax操作的合适时机

3、数据的初始化

不能做的行为

1、只能获取到未渲染之前的dom元素

created => beforeMounted

dom开始进行渲染时触发，

他会先判定有没有el挂载元素，有则去el挂载元素内进行数据渲染，没有则查看是否用vm实例对象的$mount()方法进行挂载，没有则进行下一步

判断有没有模板template，有template 则进行模板渲染，没有template则会以el挂载元素的外层当做template来渲染el挂载元素，有template则用template里面的元素进行数据渲染

beforeMount

开始对查找到的模板或者挂载元素进行渲染

不能做的行为

1、只能获取到未渲染之前的dom元素

mounted

模板渲染完成时触发，已经做完了第一次的渲染

用处

1、进行ajax请求，这时候要更新数据进行渲染，这时进行的是第二次的渲染

2、在dom第一次渲染完毕获取数据后进行操作

beforeUpdate

在第一次渲染之后的每次页面渲染时触发，在页面渲染之前触发

用处

1、拿到更新之前的dom

update

在第一次渲染之后的每次页面渲染时触发

用处

1、拿到更新之后的dom

beforeDestroy

组件开始卸载触发

this.$destroy() 销毁当前实例

destroyed

实例卸载完毕后触发