Vue生命周期函数8个（每个钩子函数可以做什么、执行顺序）

Vue生命周期函数8个（每个钩子函数可以做什么、执行顺序）

---

Vue生命周期函数有四个阶段：①实例创建之前/之后、②组件挂载之前/之后、③数据改变视图更新之前/之后、④实例销毁之前/之后、

 

每个钩子函数可以做什么：

①实例创建之前/之后：
beforeCreate(实例创建之前)：每个页面都是一个Vue实例,这时实例还没创建,所以data还不知道,也不能用watch监听, 这时data和methods的钩子函数都不能使用;

created(实例创建之后)：实例已经创建完，可以得到data,调用watch,但是页面还是空白的。是最早可以使用data和methods的钩子函数；

---

 

②组件挂载之前/之后：
beforeMount(组件挂载之前)：页面挂载前,这时节点还没渲染完成;

mounted(组件挂载之后)：页面挂载完成,页面的内容已经渲染出了,也可以访问到dom, 此时模板渲染完成;

---

 

created和mounted的区别:
created:实例创建完成之后,最早可以使用data和methods的钩子函数;
mounted:组件挂载之后,此时模板渲染完成,挂载的节点;

created和mounted都可以请求axios;

---

 

③数据改变视图更新之前/之后：
beforeUpdate(数据改变视图更新之前):数据改变视图更新之前,就是虚拟DOM打补丁之前。这时访问到的DOM还有原有的DOM;

updated(数据改变视图更新之后):数据改变视图更新之后;

注意:如果当前页面有挂载子组件,子组件更新时它并不能保证子组件也重绘。如果我想确定是整个dom都更新可以使用 this.$nextTick();

nextTick()的原理：

Vue并不是在数据发生变化之后立即更新DOM，而是按一定的策略进行DOM的更新。

Vue在更新DOM时是异步执行的，所以我们在循环更新DOM后不能立即获取DOM，通过nextTick()来获取。

全局:使用Vue.nextTick(callback);

组件内:Vm.$nextTick([callback]); 

---

④实例销毁之前/之后:
beforeDestroy(实例销毁之前):在destroy阶段,对data的改变不会再触发周期函数,说明此时Vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。是最后一次可以使用data和methods的钩子函数。

 destroyed(实例销毁之后):实例已经被完全销毁

---

执行顺序：