vue生命周期介绍

周期图

vue的生命周期

beforeCreate（初始化界面前 ）

在实例初始化之后，数据观测和暴露了一些有用的实例属性与方法。
在当前阶段中data、methods、computed以及watch上的数据和方法均不能被访问。

created（初始化界面后 ）

当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。在当前阶段无法与Dom进行交互，可以通过vm.$nextTick来访问Dom。在这个周期里面如果进行请求是可以改变数据并渲染，由于DOM未挂载，请求过多或者占用时间过长会导致页面线上空白。

beforeMount（挂载前 渲染dom前）

template模板已导入渲染函数编译。
数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个位置。在此时也可以对数据进行更改，不会触发updated。

mounted（挂载完成 渲染dom后）

Dom挂载完毕，数据完成双向绑定，刚才那个位置也会显示数据，使用$ref属性对Dom进行操作。也可以向后台发送请求，拿到返回数据。

beforeUpdate（更新数据前）

只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据
，你可以在当前阶段进行更改数据，不会造成重渲染

updated（更新数据后）

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死，因为这可能会导致无限循环的更新。

beforeDestroy（销毁前 卸载组件前）

可以继续访问到真实DOM结构以及data中的数据，通常在这个生命周期函数中做一些事件绑定/移除的操作，比如清除计时器

destroyed（销毁完成 卸载组件后）

销毁后：断开DOM与数据之间的关联，访问不到真实的DOM结构；