Vue源码分析-render的实现

在这里插入图片描述
_render方法是在让render.js文件定义的,在原型上挂载了这个方法,方法中从$options上拿到renderrender可以是手写,也可以是编译生成
在这里插入图片描述
之后调用render.call(vm._renderProxy, vm.$createElement);,第一个参数是执行的上下文_renderProxy对象,第二个参数$createElement
在这里插入图片描述

两个createElement的区别就是最后一个参数falsetrue,一个是手写render函数,另一个是编译生成的render函数。这个函数是在初始化时initRender被调用的时候执行。
在这里插入图片描述
_renderProxy的定义也是发生在init的时候,判断如果是生产环境就直接把vm赋值给_renderProxy,如果是开发阶段调用initProxy()
在这里插入图片描述
在这里插入图片描述

首先判断浏览器是否支持hasProxy,它的作用是对 对象访问做一个劫持,我们调用initProxy的时候,Chrome浏览器是支持proxy的,所以就会调用new Proxy(vm, handler)handler参数在这里是指向hasHandler
在这里插入图片描述
hasHandler有一个判断,如果这个target有没有这个元素,isAllowed是全局的方法或者是私有的属性方法,如果两个都不满足的情况下,就会执行warnNonPresent方法
在这里插入图片描述
这个方法就会报一个我们最熟悉的警告,Property or method xxx is not defined on the instance but ...

最后回到我们的rener方法实际上生成一个vnode,如果在生成过程中出现错误就会进行的处理,最终要拿到vnode,
在这里插入图片描述
接下来判断如果vnode不是VNode的实例,如果是array的话,说明我们模板会有多个根结点,会返回多个vnode,于是就会报一个警告Multiple root nodes returned from render function. Render function should return a single root node.

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值