vue生命周期

发表于 | 分类于 | 阅读次数:

在 vue 的官方文档中，我们可以看到 vue 的整个生命。

01

vue 主要给我们提供了如下八个钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

首先我们先粗略的了解一下，vue 初始化的时候会做哪些事情。

  • 挂载生命周期钩子
  • 解析 data 属性，将 data 属性转化为 Observer
  • 解析模板，编译模板
  • 挂载节点

各生命周期的含义

beforeCreate

在 beforeCreate 的时候，vue 只是将各生命周期注册的方法挂载到对应的钩子上，此时还未对 data 中的元素做初始化

created

这个阶段主要完成了将data转化为Observer,此时还未对模板进行编译

beforeMount

这个阶段主要做了两个事

  1. 检查vue配置，即new Vue{}里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用vm.$mount()
  2. 检查配置中的template项，如果没有template进行填充被绑定区域，则被绑定区域的el对象的outerHTML（即整个#app DOM对象，包括
    和
    标签）都作为被填充对象替换掉填充区域

此时模板还未进行编译。

mounted

这个阶段完成了对模板的编译，并完成了元素的挂载。

beforeUpdate

数据改变时，会进入这个钩子

updated

组件更新之后，会进入这个钩子

beforeDestory

组件销毁前调用

destoryed

组件销毁后调用

父子组件的加载顺序

vue 在编译模板的时候，最先读进去的是根元素，然后一层一层的递归进子模板。

编译完成之后，在从子组件开始一层一层向外挂载。

总的来说就是，从创建到编译，是从父到子，从编译到挂载，是由子到父。

$nextTick

在 vue 中，数据更新的时候并不会立刻去更新视图，而是会先将数据放入队列中异步的去更新视图。通过 $nextTick 我们就可以在视图更新之后再去调用方法了。