生命周期
执行生命周期的函数都是调用 callHook 方法
callHook
根据传入的字符串 hook ，去拿到 vm.$options[hook] 对应的回 调函数数组，然后遍历执⾏，执行的时候把 vm 作为函数执⾏的上下⽂。
各个阶段的⽣命周期的函数也被合并 到 vm.$options ⾥，并且是一个数组。
调用示例
调用
beforeCreate 和 created 的钩子调用是在 initState 的前后， initState 的作用是初始化 props 、 data 、 methods 、 watch 、 computed 等属性， beforeCreate 的钩⼦函数中就不能获取到 props 、 data 中定义的值，也不能调用 methods 中定义的函数。
beforeMount 和 mounted
beforeMount 钩⼦函数发生在 mount ，也就是 DOM 挂载之前，它的调用时机是在 mountComponent 函数中。
beforeMount 和 mounted
在执行 vm._render() 函数渲染 Vnode 之前，执行了 beforeMount 钩子函数，在执行完 vm._update() 把 Vnode patch 到真实 DOM 后，执行 mouted 钩子。
这里 vm.$vnode == null 表明这是 通过 new Vue 初始化过程，对于组件 mounted 在什么时候触发，在 patch 过程中 执了 invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);
invokeInsertHook
组件的 VNode patch 到 DOM 后，会执行 invokeInsertHook 函数，把 insertedVnodeQueue 里保存的钩子函数依次执行⼀遍
insertedVnodeQueue 的添加顺序是先子后父，所以对于同步渲染的子组件而言， mounted 钩子函数的执行顺序也是先⼦后⽗。
beforeUpdate & updated
该过程也在 mountComponent 函数的 new Watcher 中
beforeUpdate
这里的最后一个参数 true ，表示这是一个 isRenderWatcher 标志
把 当前 watcher 的实例赋值给 vm._watcher ，把当前 wathcer 实例 push 到 vm._watchers 中， vm._watcher 是专门用来监听 vm 上 数据变化然后重新渲染的，所以它是⼀个渲染相关的 watcher ，因此在 callUpdatedHooks 函数 中，只有 vm._watcher 的回调执行完毕后，才会执行 updated 钩子函数。
updated 触发时机
updatedQueue 是 更新了的 wathcer 数组，那么在 callUpdatedHooks 函数中，它对这些数组做遍历，只有满足 当前 watcher 为 vm._watcher 以及组件已经 mounted 这两个条件，才会执⾏ updated 钩⼦函数。
beforeDestroy & destroyed
destroy
beforeDestroy 钩⼦函数的执⾏时机是在 $destroy 函数执⾏最开始的地⽅，接着执行了⼀系列的 销毁动作，包括从 parent 的 $children 中删掉自身，删除 watcher ，当前渲染的 VNode 执⾏ 销毁钩⼦函数等，执行完毕后再调⽤ destroy 钩⼦函数。 在 $destroy 的执行过程中，它⼜会执⾏ vm.__patch__(vm._vnode, null) 触发它⼦组件的销毁 钩⼦函数，这样⼀层层的递归调⽤，所以 destroy 钩⼦函数执行顺序是先子后父，和 mounted 过 程⼀样。
网友评论