Vue组件生命周期函数笔记

什么是生命周期：一个组件从创建到背销毁的过程。

四大阶段，八大钩子函数：

创建阶段：

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

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

挂载阶段：

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

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

注意：

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

更新阶段：

只是试图刷新，不是页面刷新，如果更改数据与原数据一致，是不会进行修改的，内部会将虚拟节点用diff算法进行对比，如果对比一致则不进行更新，而且只会进行同级对比，而且使用唯一值key进行选中需要修改的节点

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

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

销毁阶段：

通过$destroy将所有指令解绑，试图层已经跟数据层不再连接，然后触发beforeDestroy和destroyed的钩子

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

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

新手上路，多多关照