生命周期

生命周期

生命周期（template compilation is performed ahead-of time if using a build step,e.g. single-file components：如果使用构造生成文件，构造器将提前执行模板编译，例如单文件组件）

• 初始化Events和Lifecycle（生命周期）
• 1、beforeCreate(data未初始化，一般用来修改this.$options的值)
• 初始化injections（注入）和reactivity（响应）
• 2、created
• 有el挂载，编译template为render函数。没有el，当挂载时才编译（挂载方法vm.$mount(el)）
• 3、beforeMount
• 创造$el替换el（dom元素，应该是dom树，还没有到渲染阶段）
• 4、mounted（挂载）
• 5、响应改变beforeUpdate
• render重新计算，patch（补丁）
• 6、updated
• vm.$destroy()被调用
• 7、beforeDestroy
• 卸载watchers、child components、event listeners
• 8、destroyed

————————————————————————————————————————————————————————————

选项 / 生命周期钩子

beforeCreate

• 会先触发父组件的钩子，然后才触发内部子组件的钩子

created

• 初始化是从父元素开始向子元素层层递进，且在一个分支会先走到分支的最后一个节点才走下一个分支

beforeMount

mounted

• 刚好和created相反，从第一分支的最后一个节点开始，等所有子节点都挂载后，父节点才挂载

beforeUpdate

updated

activated

• 必须在单页面应用中跳转才能触发，如果在多页面间跳转，不管使用<a>还是使用router.push都无法触发
• 激活，当组件通过<keep-alive>缓存后进行切换时触发
• 先触发子组件的再触发父组件的

deactivated

• 必须在单页面应用中跳转才能触发，如果在多页面间跳转，不管使用<a>还是使用router.push都无法触发
• 停用，当组件通过<keep-alive>缓存后进行切换时触发
• 同激活。先触发子组件的再触发父组件的

beforeDestroy

• 必须在单页面应用中跳转才能触发，如果在多页面间跳转，不管使用<a>还是使用router.push都无法触发
• 根、子组件都会被触发，先触发根组件的再触发子组件
• 当组件被<keep-alive>缓存后不被触发
• 通过 $once(eventName, eventHandler) 一次性侦听一个事件

mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })

  this.$once('hook:beforeDestroy', function () { // 通过动态的侦听事件，可以把创建对象和销毁对象的代码聚合在一个地方，方便维护。实际跟在beforeDestroy钩子下执行是一样效果（这里的事件名很特别）
    picker.destroy()
  })
}

destroyed

• 必须在单页面应用中跳转才能触发，如果在多页面间跳转，不管使用<a>还是使用router.push都无法触发
• 根、子组件都会被触发，先触发子组件的再触发根组件
• 当组件被<keep-alive>缓存后不被触发

errorCaptured