_render
方法是在让render.js
文件定义的,在原型上挂载了这个方法,方法中从$options
上拿到render
,render
可以是手写,也可以是编译生成
之后调用render.call(vm._renderProxy, vm.$createElement);
,第一个参数是执行的上下文_renderProxy
对象,第二个参数$createElement
两个createElement
的区别就是最后一个参数false
和true
,一个是手写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.