Vue2 - 生命周期

154 阅读1分钟

八大生命周期

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestory destroyed

img

内置方法初始化

props => methods =>data => computed => watch

beforeCreate

在内存刚刚创建

被调用后

初始化 inject

初始化 props => methods =>data => computed => watch

初始化 provide

created

data methods已经能获取 模板还没有编译

被调用后

编译 template模板 生成AST抽象语法树

优化 AST 标记静态节点

根据 AST 生成 render函数(渲染函数)

beforeMount

挂载的对象已经编译好 但页面的DOM树还没挂载上去

被调用完成后

接着拿到上一次 render函数 生成 vnode

对 vnode 进行patch 渲染到DOM节点

mounted

页面已经挂载完成

beforeUpdate

data的数据已经更新 到还没开始渲染DOM树

被调用后

经历一系列的 patch diff 流程后 vnode更新 组件重新渲染

updated

DOM节点被重新渲染

beforeDestory

vue实例还能接着使用

destroyed

所有实例指示的所有东西都会解除绑定,事件监听器也都移除,子实例也被销毁

开始的闪屏

[v-cloak] {    
    display: none;
}