一起来学Vue

Vue.js

　　学习vue.js生命周期 生命周期是什么？

　　一个组件从创建到销毁的整个过程就是生命周期

　　首先分为八个生命周期：

　　1.beforeCreate:创建前

　　　　组件创建前会执行的生命周期函数，在此是访问不到data身上的属性的;

运用场景：在使用时可加载loading，页面创建完毕则改变{true，false};

　　2.created：创建后

　　　　　组件创建成功，可访问或者改变data里的属性方法，并且会遍历data身上所有属性，给这些属性添加一个getter/setter方法，同时会将methods身上的方法添加到VM的实例身上

　　3.beforeMount 挂载前

　　　　　顾名思义，在组件还未挂在任何类似块级管理器身上，但是可以对data中的数据做最后的修改，当前生命周期函数中模板和数据还未进行结合

　　4.mounted 挂载后

　　　　生成真正的dom结构，在当前生命周期函数中可以访问真实dom结构，可以在此声明周期做一些插件实例化，（扩展：ref 名称必须组件中独一无二，可获取dom结构）

　　5.beforeUpdate 更新前 （多次执行）

　　　　当数据更新就会执行的生命周期函数，当前生命周期函数是更新数据前还未和模板进行结合，所以我们可以在这个生命周期函数内对数据更新前做最后的修改

　　6.updated 更新后 （多次执行）

　　　　数据更新后会触发，模板和数据相结合，可以获取更新后最新的dom结构，一般情况会清除缓存插件更新实例插件，但是需要加条件判断，不然会多次执行，产生性能消耗

　　7.beforeDestroy

　　　　在当前生命周期函数中依旧可以访问真实dom结构，因此我们可以在这个生命周期函数中进行事件解绑，监听以及移除等操作

　　8. destroyed 销毁后

　　　　销毁整个组件后触发，无法在通过ref访问到真实dom结构，VM与模板之间关联进行断开

　　　　　 

　　9.扩展知识 

  $nextTick(()=>{})：可获取更新后最新的dom结构

　　方法是同步 但是内部执行的是异步，底层是计时器转换异步操作，所以优先使用