什么是生命周期:一个组件从创建到背销毁的过程。
四大阶段,八大钩子函数:
创建阶段:
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(实例销毁之后):实例已经被完全销毁
新手上路,多多关照