vue钩子函数的实现,基本原理就是callback
来看一下Vue中实现钩子函数部分的源码// ...export function lifecycleMixin (Vue: ClassComponent>) {Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {const vm: Component = thisif (vm
·
来看一下Vue中实现钩子函数部分的源码
// ...
export function lifecycleMixin (Vue: Class<Component>) {
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
if (vm._isMounted) {
callHook(vm, 'beforeUpdate') // callHook来调用钩子函数
}
// ...
export function callHook (vm: Component, hook: string) {
const handlers = vm.$options[hook]
if (handlers) {
for (let i = 0, j = handlers.length; i < j; i++) {
try {
handlers[i].call(vm) // 以组件实例来作为钩子函数中this的指向
} catch (e) {
handleError(e, vm, `${hook} hook`)
}
}
}
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook)
}
}
我们可以看到处理流程就是在生命周期流程中相应流程执行后,执行callHook()。而callHook的作用便是执行我们自定义的钩子函数,并将钩子中this的指向指为当前组件实例(通过Function.prototype.call)
更多推荐
已为社区贡献11条内容
所有评论(0)