Vue2之initRender与callHook组件怎么应用

发布时间:2022-08-24 16:42:00 作者:iii
来源:亿速云 阅读:187

今天小编给大家分享一下Vue2之initRender与callHook组件怎么应用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

initRender 组件渲染初始化

initEvents 事件系统初始化完成之后,紧接着的就是组件实例的渲染部分的初始化 initRender

initRender 函数定义位于 src/core/instance/render.ts 文件内,基本定义如下:

 export function initRender(vm: Component) {
   vm._vnode = null
   vm._staticTrees = null
   const options = vm.$options
   const parentVnode = (vm.$vnode = options._parentVnode!)
   const renderContext = parentVnode && (parentVnode.context as Component)
   vm.$slots = resolveSlots(options._renderChildren, renderContext)
   vm.$scopedSlots = parentVnode
     ? normalizeScopedSlots(vm.$parent!, parentVnode.data!.scopedSlots, vm.$slots)
     : emptyObject
   vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
   vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
   const parentData = parentVnode && parentVnode.data
   if (__DEV__) {
     defineReactive(
       vm,
       '$attrs',
       (parentData && parentData.attrs) || emptyObject,
       () => !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm),
       true
     )
     defineReactive(
       vm,
       '$listeners',
       options._parentListeners || emptyObject,
       () => !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm),
       true
     )
   } else {
     // 将 defineReactive 的第四个参数设为 null 重新执行上面的步骤,即省略校验和报错部分
   }
 }

这部分其实比较好理解:

首先是 清空 组件的 VNode 对象和静态dom节点树;并获取到该实例的 父组件虚拟dom树对象 parentVnode父组件实例指向 renderContext

然后是处理 当前组件的 slots 插槽对象 ,以及标准化处理组件的数据域插槽

给组件添加两个 组件创建方法,但是这两个方法有细微差别:

最后对 attrs∗∗和∗∗attrs** 和 **attrs∗∗和∗∗listeners 进行响应式处理。这一步主要是为了提供给高阶组件使用,当使用 attrs∗∗和∗∗attrs** 和 **attrs∗∗和∗∗listeners 进行绑定数据与事件透传时,可以正确触发高阶组件内部的状态更新。

整个过程其实就是解析了组件的 options 配置项与父组件的绑定参数,并对插槽和数据域插槽进行不同处理,最后给组件添加 _createElement 的事件指向绑定,并响应式处理两个组件内部没有直接定义的参数/事件。

callHook('beforeCreate')

因为这部分篇幅较少,所以把 callHook() 方法也一并看了。

这个方法从名字上就可以看出,是用来触发生命周期钩子的回调函数。在之前的 mergeOptions 配置合并 中已经知道,Vue 组件在实例化的时候会对 options 中的生命周期钩子函数定义进行标准化处理,最后每个生命周期对应的都是一个 函数数组(如果有定义了钩子函数的话)。

该方法的定义如下:

 export function callHook(vm: Component, hook: string, args?: any[], setContext = true) {
   pushTarget()
   const prev = currentInstance
   setContext && setCurrentInstance(vm)
   const handlers = vm.$options[hook]
   const info = `${hook} hook`
   if (handlers) {
     for (let i = 0, j = handlers.length; i < j; i++) {
       invokeWithErrorHandling(handlers[i], vm, args || null, vm, info)
     }
   }
   if (vm._hasHookEvent) {
     vm.$emit('hook:' + hook)
   }
   setContext && setCurrentInstance(prev)
   popTarget()
 }

这里可以分成一下几步来理解:

以上就是“Vue2之initRender与callHook组件怎么应用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. Docker入门与应用实战之Dockerfile
  2. 理解与应用Android桌面组件AppWidget

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue callhook initrender

上一篇:mybatis怎么调用mysql存储过程并获取返回值

下一篇:Android数据存储方式是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》