vue render传入this_【Vue原理】Render 源码版 之 主要 Render

专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧

研究基于 Vue版本2.5.17

compile 我们已经讲了九篇的内容了，终于走到了 render，今天就来给自己记录下渲染三部曲的第二部，render，咦，render 内容不多的，就两篇文章哈哈哈

噔噔噔噔

render 的作用大家应该清楚

就是 执行 compile 生成的 render函数，然后得到返回的 vnode 节点

比如现在存在这个简单的模板

经过 compile 之后，解析成了对应的 render 函数，如下

function render() {    

    with(this) {        

        return _c('div', {            

            attrs: {                

                "data": 111

           }
       },
       [_v(111)])
   }
}

看着这个莫名其妙的 render 函数，里面都是些什么东西？

不怕，主要是出现了两个函数，我们要探索的就是这两个东西

_c , _v 

这个两个函数的作用，都是创建 Vnode，但是创建的过程不一样

并且 render 函数执行的时候，会绑定上 模板对应的实例 为上下文对象

模板是属于哪个实例的，就绑定哪个实例

render.call(实例)

再通过 with 的作用

调用 _c 和 _v  就相当于 vm._c 和 vm._v 

什么是 vm._v

现在就来看看 vm._v 是哪里来的

function installRenderHelpers(target) {
    
    target._v = createTextVNode;
}

installRenderHelpers(Vue.prototype);

由上面可知，每个Vue 实例都会继承有 _v 这个方法，所以可以通过 vm._v 直接调用

再来看看 _v 对应的 createTextVNode 的作用是什么

创建文本节点！！

看下源码

function createTextVNode(val) {    

    return new VNode(        

        undefined, undefined,