美文网首页
vue的render函数

vue的render函数

作者: 八月飞花 | 来源:发表于2020-04-14 23:30 被阅读0次

render函数的作用

是将template模板编译为render函数的,或者将组件编译为render函数
render函数最终会生成vnode,
当报多个根节点错误时,就是在这里抛出的

我们自己使用render函数

render就不会有template转换这一步,这个函数会将这个节点的内容替换为render生成的函数
var vm=new Vue({
  el:"#app",
  render(createElement){
    renturn createElement("div",{
      attrs:{
        id:"#app1" 
      }
    },this.message)
  }
})

render函数---通过initrender加入vm对象原型上

render函数是在  src\core\instance\render.js文件下
render函数可以自己写,也可以由模板生成

Vue.prototype._render函数

1获取vm.$options的render,如果没有
  Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options

    if (_parentVnode) {
      vm.$scopedSlots = normalizeScopedSlots(
        _parentVnode.data.scopedSlots,
        vm.$slots,
        vm.$scopedSlots
      )
    }

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode
    // render self
    let vnode
    try {
      // There's no need to maintain a stack because all render fns are called
      // separately from one another. Nested component's render fns are called
      // when parent component is patched.
      currentRenderingInstance = vm
     //参数,vm当前上下文(生产环境 就是this本身)
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
      handleError(e, vm, `render`)
      // return error render result,
      // or previous vnode to prevent render error causing blank component
      /* istanbul ignore else */
      if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
        try {
          vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
        } catch (e) {
          handleError(e, vm, `renderError`)
          vnode = vm._vnode
        }
      } else {
        vnode = vm._vnode
      }
    } finally {
      currentRenderingInstance = null
    }
    // if the returned array contains only a single node, allow it
    if (Array.isArray(vnode) && vnode.length === 1) {
      vnode = vnode[0]
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof VNode)) {
      if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
        warn(
          'Multiple root nodes returned from render function. Render function ' +
          'should return a single root node.',
          vm
        )
      }
      vnode = createEmptyVNode()
    }
    // set parent
    vnode.parent = _parentVnode
    return vnode
  }

相关文章

网友评论

      本文标题:vue的render函数

      本文链接:https://www.haomeiwen.com/subject/mudfvhtx.html