Vue 生命周期理解

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestory
• destoryed

1. 初始化

new Vue() 实例化之后，Vue 会调用 _init 函数进行初始化；它会初始化生命周期、事件、props、methods、data、computed 和 watch等。 new Vue() 实例化之后，Vue 会调用 _init 函数进行初始化；它会初始化生命周期、事件、props、methods、data、computed 和 watch等。

 Vue.prototype._init = function(options) {
        initLifecycle(vm)
        initEvents(vm)
        initRender(vm)
        callHook(vm, 'beforeCreate') // 拿不到 props data
        initInjections(vm) 
        initState(vm)  // 所有数据的初始化
        initProvide(vm)
        callHook(vm, 'created')
    }

2. beforeCreate 和 created 之间

初始化完成之后，到 beforeCreate 周期，在 beforeCreate 和 created 之间进行数据的观测。可以看到 created 的时候数据已经和 data 属性进行绑定，放在 data 中的属性值发生变化时，视图也会改变。

注意： 此时还没有 el 选项

3. created 和 beforeMount 之间

在这之间，首先会判断对象是否有 el 选项，如果有的话就继续向下编译；没有的话，则停止变编译，也就意味着停止了生命周期，直到在该 Vue 实例上调用 vm.$mount(el)。

接着判断有无 template 选项：
1）如果 Vue 实例对象中有 template 参数选项，则将其作为模版编译成 render 函数
2）如果没有 template 选项，则将外部 HTML 作为模版编译。
3）可以看出 template 中的模版优先级要高于 外部 HTML。

4. beforeMount 和 mounted 之间

给 Vue 实例对象添加 $el 成员，并且替换掉挂载的 dom 元素。在 beforeMount 之前 el 还是 undefined。

5. beforeUpdate 和 updated 之间

当 data 中的数据发生改变时，会触发对应的组件的重新渲染。

6. beforeDestory 和 destoryed

beforeDestory 钩子函数在实例被销毁之前调用，此时，实例仍然可用。
destroyed 在实例被销毁之后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器都会被移除，所有的子实例也都会被销毁。