vue生命周期

vue的生命周期就是一个vue组件或实例从出生到销毁的过程

所有生命周期钩子的this上下文指向他的vue实例

 

vue有8个生命周期函数，分别是beforeCreate，created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

 

beforeCreate 在组件初始化之前

这个生命周期组件的数据、方法、事件还都没有。

简单来说,new Vue之后 第一句话就调用beforeCreate

比如：

function Fn(age){

　　beforeCreate()

　　this.age = age;

}

应用：可以使用loading

 

created 当数据初始化之后调用

当数据、方法、事件初始化之后调用

简单点来说，当数据有初始值之后调用

比如：

function Fn(age){

　　beforeCreate()

　　this.age = age;

　　created();//这时候拿到数据就可以修改数据了

}

应用：一般都是请求数据的时候用，可以在这里关闭loading

 

beforeMount 渲染之前

 beforeMount之前el上还是undefined

 

mounted 渲染之后

Dom渲染之后，可以获取页面的（主要是数据生成出来的）元素

nextTick:当DOM更新完成时触发，只要操作DOM就使用nextTick(不用依依映射)

（如果mounted下不能准确拿到dom元素，那么就使用nextTick）

 

beforeUpdate 数据更新之前

当组件或实例的数据更改之后，会立即执行beforeUpdate

 

update 数据更新之后

（一般使用computed居多）
可以直接使用computed即可

 

beforeDestroy 生命周期销毁之前

应用场景：关掉定时器、状态初始化

 

destroyed 生命周期销毁之后

Vue实例销毁后，数据就不能添加

 

一般来说用的最多的是created和mounted。

在new 了vue之后 一开始进行beforecreate，这时数据还没有初始化。可以去做一个loading动画，然后进入created 这时数据已经初始化（data的方法已经有了），此时可以请求数据。请求数据一般用created，在执行中看有没有el属性，有的话就走el，可以把根节点挂载上。没有的话就直接看vm身上有没有$mount，如果两个都没有，（缺少挂载点），生命就结束了。如果有挂载点就看看有没有template属性，有的话就把挂载点的值替换掉，没有的话找根节点的innerHTML。接着进入beforeMount，这时字符串，模板都已经编译好还没有进入页面，此时进入mounted状态，Dom就有了。当更改数据时候，数据是更新了，但试图不一定能一一映射，这时候就使用nextTick直接拿到DOM，不用依依映射。当数据变化就到了beforeUpdate和updated，这两个一个是更新前一个是更新后，一般用computed居多。然后就到了beforeDestroy和destroy，像路由切换就用destroyed，没有路由时候，人为手动触发，有路由，切换路由时候，上一个组件触发。