vue生命周期理解干货

beforeCreate（创建前）

​ data和methods中的数据都还没有初始化完成

created（创建后）

​ 如果要调用methods中的方法 或者操作data中的数据最早只能在created中操作

beforeMount（挂载前）

​ 这里是遇到的第三个生命周期 表示模板已经在内存中编译完成了 但是尚未把模板渲染到 页面中

​ //执行的时候页面中的元素还未真正的替换过来 只是之前的一些模板字符串

Mounted（挂载后）

​ 这是第四个生命周期函数 表示内存中的模板已经真实的挂载到了页面中 用户已经可以看到渲染到的页面了 只要执行完了mounted 表示整个vue实例全部初始化完毕了 组件已经脱离了创建阶段 进入到了运行阶段

beforeUpdata（更新前）

​ 数据被更新了 当执行beforeUpdata时 页面中显示的数据,还是旧的 此时data的数据是新的,但是页面尚未和最新的数据保持同步

updated（更新后）

​ 页面和数据保持了同步更新

​ 这一步执行的是:先根据data中最新的数据,在内存中,重新渲染出一份 最新的内存DOM树

​ 当最新的内存DOM树被更新后 会把其渲染到页面上去,这时候就完成了数据从data( model层 ) -> view (视图层)的更新

这两个事件(beforeUpdata updated)会根据data数据的改变而选择性的触发0次到多次

beforeDestroy（销毁前）

​ 当执行了beforedestroy钩子时,Vue实例已经从运行阶段,进入到了销毁过程

​ 但是此时实例身上的所有 data methods 过滤器 指令等等都处于一个可以用的状态 此时还未真正销毁

Destroyed（销毁后）

当执行到了destroyed函数时 组件已经被完全销毁了 组件中所有的数据 方法指令等等都已经不可以使用