vue 渲染函数处理slot_Vue源码全面解析七 initRender 函数(处理渲染相关的函数)...

c4f621d32ddcd7a8ba263bc56c513fe2.png

首先我们打开src/core/instance/render.js'文件,代码如下:

export function initRender (vm: Component) {  vm._vnode = null // the root of the child tree  vm._staticTrees = null // v-once cached trees  const options = vm.$options  const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree  const renderContext = parentVnode && parentVnode.context  vm.$slots = resolveSlots(options.resolveSlots, renderContext)  vm.$scopedSlots = 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  /* istanbul ignore else */  if (process.env.NODE_ENV !== 'production') {    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(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)  }}

这个函数的主要功能是:

1、获取_parentVnode对象(子组件存在)

2、将vnode解析为slot对象

3、挂载 '_c'函数(生成vnode)

4、调用defineReactive函数拦截实例的 '$attrs' 和 '$listeners' 属性的操作

 const parentVnode = vm.$vnode = options._parentVnode  const renderContext = parentVnode && parentVnode.context  vm.$slots = resolveSlots(options._renderChildren, renderContext)

获取父级 'Vnode' 节点,把 '_renderChildren' 子级的vnode转换为slot插槽(resolveSlots)函数。

 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)

在实例对象 'vm' 上挂载 ‘_c’ 函数,此函数主要是生成vnode虚拟节点。

关于createElement函数的具体分析,我们留到后面章节。

 defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true) defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)

最后拦截对 '$attrs' 和 '$listeners' 属性的操作, '$attrs' 和 '$listeners'都是只读的。

关于defineReactive函数的具体分析,我们留到后面章节。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值