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之后开始销毁

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