Vue 实例的生命周期

官网生命周期图示

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforDestroy
8. destroyed

其余 lifecycle_hook

keep-alive配合应用的 activated 和deactivated
捕捉谬误 的errorCaptured
解决 ssr的serverPrefetch

各阶段生命周期函数阐明

1 beforeCreate created

这两个 hook 是在模板编译之前，初始化阶段执行
源码

在调用 beforeCreate 之前

• 初始化 生命周期
• 初始化 事件
• 初始化render

在调用 created 之前

• 初始化 注入
• 初始化 状态
• 初始化provide

initState

  function initState (vm) {vm._watchers = [];
    var opts = vm.$options;
    if (opts.props) {initProps(vm, opts.props); }
    if (opts.methods) {initMethods(vm, opts.methods); }
    if (opts.data) {initData(vm);
    } else {observe(vm._data = {}, true /* asRootData */);
    }
    if (opts.computed) {initComputed(vm, opts.computed); }
    if (opts.watch && opts.watch !== nativeWatch) {initWatch(vm, opts.watch);
    }
  }

初始化状态

• initProps
• initMethods
• initData
• initComputed
• initWatch

initState的调用在 beforeCreate 与created之间 ，所以
beforeCreate 获取不到 vm 上的 data 与 methods
created 能获取到

2 beforeMount mounted

beforeMount 在模板编译后，挂载前，mounted 在挂载之后

调用 beforeMount 之前

• 判断 el 与 template
• 调用 $mount 函数
• 模板编译实现
  Vue.prototype.$mount 源码

调用 mounted 之前

• 将编译好的模板挂载到页面

源码

beforeMount上能获取模板信息，然而页面未显示
mounted 页面挂载实现

到 mounted 为止，从无到有，创立阶段实现
在运行阶段未产生销毁，不会再调用以上 hooks

3 beforeUpdate updated

运行阶段的 hooks
beforeUpdate在数据扭转后页面渲染前，updated在新数据渲染到页面后
在下面的源码中能够看到，watcher 侦测到数据变动时就会调用 beforeUpdate

在数据更新实现后会调用updated

4 beforeDestroy destroyed

在调用 $destroy 时会调用这两个 hook

在 beforeDestoy 之后开始销毁

• 从父级拆除
• 进行侦测
• 删除数据