Vue生命周期函数详细图解

Vue生命周期函数详细图解

创建期间的生命周期函数

beforeCreate（）{ 创建前 } 实例在内存中被创建出来，此时还没有初始化好 data 和 methods 属性，我们可以在此创建一个 loading
created （）{ 创建后 } 实例已经在内存中创建OK，此时 data 和 methods 已经创建好了，可以访问到 new Vue（）中的所有属性和方法，会将data中所有属性和methods中所有的方法都挂载到 new Vue（）的实例化对象上，会给data的所有属性都添加一个getter/setter方法，可以对数据进行动态操作 ； 故，若要和后端进行数据交互，必须在该函数中进行，但此时还没有开始 编译模板
beforeMount （）{ 挂载前 } 此时已经完成了模板的编译，但是还没有挂载到页面中，可以对数据进行最后的更改，在这个生命周期函数中不能访问到真实的DOM结构
mounted（）{ 挂载后 } 已经编译好的模板，挂载到了页面指定的容器中显示，可以通过 this.$refs.值 来访问DOM结构，注：标签的ref = “值是唯一的" ， 该属性类似于id
注意： mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示实例已经被完全创建好了，此时如果没有其他操作的话，这个实例会在内存中一动不动

运行期间的生命周期函数

beforeUpdate（）{ 更新前 } 状态更新前执行此函数，此时data中的状态值是最新的，但是界面上显示的还是旧的数据，此时还没有开始重新渲染DOM节点，可以对数据做最后的修改。注：该函数中数据和模板还未更新完毕
updated（）{ 更新后 } 实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经重新渲染好，可以访问到 最新的 DOM结构。注：由于这个生命周期函数是频繁被触发的，所以我们若要在该函数中绑定一些事件或进行实例化的时候需要做一个提前判断 if（!..）{ }

销毁期间的生命周期函数

beforeDestroy（）{ 销毁前 } 实例销毁之前调用，在这一步，实例仍然完全可用，还继续可以访问到DOM结构，一般在这个函数中做一些事件的解绑/移除操作
destroyed（）{ 销毁后 } 实例销毁后调用，调用后，实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁，数据和dom的关联已经断开 ，在这个生命周期函数中是访问不到真实的dom结构的