hook生命周期源码总结

function Vue(opt){        
	this._init(opt)
}

function initLifecycle(vm) {
    vm._isMounted = false;
    vm._isDestroyed = false;
    vm._isBeingDestroyed = false;
}

function callHook(vm, hook) {    
    // 是自己传入的 created 等回调
    var handlers = vm.$options[hook];    
    if (handlers) {        
    for (var i = 0,j = handlers.length; i < j; i++) {
            handlers[i].call(vm);
        }
    }
}

Vue.prototype._init(opt){
    ... 合并选项
    ... 设置初始值 ，事件 等数据
    initLifecycle(vm)
    callHook(vm, 'beforeCreate');
    ... 初始化选项等数据
    callHook(vm, 'created');
    ...获取挂载的DOM 父节点
    callHook(vm, 'beforeMount');
    ...解析模板成渲染函数，并执行渲染函数，生成DOM插入页面
    vm._isMounted = true;
    callHook(vm, 'mounted');
}

// 组件更新时会调用这个函数
Vue.prototype._update = function(vnode, hydrating) {        
	if (vm._isMounted) {        
		callHook(vm, 'beforeUpdate');
    }
    ...重新调用渲染函数，对比旧节点和新节点，得到最小差异，然后只更新这部分页面
    callHook(vm, 'updated');
}

// 节点被移除时会调用这个函数
Vue.prototype.$destroy = function() {
    callHook(vm, 'beforeDestroy');
    vm._isBeingDestroyed = true;
    ...实例被消除，移除所有 watcher
    vm._isDestroyed = true;
    ...DOM被移除
    callHook(vm, 'destroyed');
}