render函数

113 阅读4分钟

vue技术内幕:caibaojian.com/vue-design/…

虚拟DOM是通过render函数渲染成真实DOM的,那么render函数又是怎么实现的呢?他的原理是什么呢?

最简单的render函数

function Render(obj, root) {
      const el = document.createElement(obj.tag)
      if (typeof obj.children === 'string') {
        const text = document.createTextNode(obj.children)
        el.appendChild(text)
      } else if (obj.children) {
      	// 递归
        obj.children.forEach((child) => Render(child, el));
      }
      root.appendChild(el)
}
const obj  = {
      tag: 'div',
      children: [
        { tag: 'span', children: 'hellow world' },
        { tag: 'div', children: 'hellow world1' }
      ]
 }

Render(obj, document.body)

很明显我们定义的obj对象 就是一组vnode,我们将其传入Render函数中,他就会将对应数据进行挂载。通过document.createElement(obj.tag)将其转为真实DOM,这样看来,render其实是很简单的事,对吧。

进阶的render函数

我们已经实现了一个最简单的render函数,我们不妨思考下,在vue中是如何将组件渲染成DOM的?

function Render(vnode, container) {
  if (typeof vnode.tag === 'string') {
    // 标签元素
    mountElement(vnode, container)
  } else if (typeof vnode.tag === 'function') {
    // 组件
    mountComponent(vnode, container)
  } else if (typeof vnode.tag === 'object') {
    // 对象
    mountObjComponent(vnode, container)
  }
}

我们先不去思考mountElement mountComponent mountObjComponent这三个方法的实现,我们先来看看整体思路。
很明显第一个判断 依然是我们最简单的‘div’等标签
然后我们进行拓展让tag可以是function 如:

const MyConponent  = function () {
      return {
        tag: 'div',
        props: {
          onClick: () => alert('123')
        },
        children: '点击'
      }
}

const vnode = {
  tag: MyConponent,
}
Render(vnode, document.body)

这里传入的就是一个函数,并且我们加入了一个点击事件。所以他将走入我们Render的二个判断。执行mountComponent函数,执行mountComponent后又将递归的执行Render直到渲染完成。

function mountElement(vnode, container) {
  const el = document.createElement(vnode.tag)
  // 将属性,事件添加到Dom
  for (const key in vnode.props) {
    if (/^on/.test(key)) {
      el.addEventListener(
        key.substr(2).toLowerCase(), // onClick -->click
        vnode.props[key]
      )
    }
  }

  if (typeof vnode.children === 'string') {
    const text = document.createTextNode(vnode.children)
    el.appendChild(text)
  } else if (Array.isArray(vnode.children)) {
    vnode.children.forEach((child) => Render(child, el));
  }
  container.appendChild(el)
}
      
function mountComponent(vnode, container) {
// 调用组件函数,获取组件要渲染的内容
  const subtree = vnode.tag()
  Render(subtree, container)
}

让我们思考下组件一定是函数吗? 当然不一定,比如他是一个对象。这是就会走Render的第三个判断,并执行mountObjComponent函数

const MyConponent = {
      render() {
        return {
          tag: 'div',
          props: {
            onClick: () => alert('123')
          },
          children: '点击'
        }
      }
    }
    const vnode = {
      tag: MyConponent,
    }

function mountObjComponent(vnode, container) {
      const subtree = vnode.tag.render()
      Render(subtree, container)
}

这就是为对象的处理,是不是与为函数时很相似。

render函数使用详情

在平时编程时,大部分是通过template来创建html。但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要 通过JavaScript 的编程能力来进行操作。此时,就到了render函数展示拳脚去时候了。

在使用render函数中,会使用到一个参数createElement,而这个createElement参数,本质上,也是一个函数,是vue中构建虚拟dom所使用的工具。下面就围绕着这个createElement来看一下。

在createelement方法,有三个参数:

return createEement(, {}, [])
  1. 第一个参数(必要参数):主要是用于提供dom中的html内容,类型可以是字符串、对象或函数。
  2. 第二个参数(对象类型,可选):用于设置这个dom中的一些样式、属性、传的组件的参数、绑定事件之类的。
  3. 第三个参数(类型是数组,数组元素类型是VNode,可选):主要用于设置分发的内容,如新增的其他组件。

注意:组件树中的所有vnode必须是唯一的
通过传入createElement参数,创建虚拟节点,然后再将节点返回给render返回出去。

总的来说,render函数的本质就是创建一个虚拟节点。

render和template的区别

相同之处:
render 函数 跟 template 一样都是创建 html 模板

不同之处:

  • Template适合逻辑简单,render适合复杂逻辑。
  • 使用者template理解起来相对容易,但灵活性不足;自定义render函数灵活性高,但对使用者要求较高。
  • render的性能较高,template性能较低。
  • 使用render函数渲染没有编译过程,相当于使用者直接将代码给程序。所以,使用它对使用者要求高,且易出现错误
  • Render 函数的优先级要比template的级别要高,但是要注意的是Mustache(双花括号)语法就不能再次使用

注意:template和render不能一起使用,否则无效

render举例

如一次封装一套通用按钮组件,按钮有四个样式(success、error、warning、default)。

template方式是如下

 <div class="btn btn-success" v-if="type === 'success'">{{ text }}</div>
 <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div>
 <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>

这样写在按钮少的时候没有问题,但是一旦按钮数量变多,这样写就会显得特别冗长,在这个时候,就需要render函数。

根据情况生成按钮DOM

在使用render函数前,需要先把template标签去掉,只保留逻辑层。

通过传入的type动态填入class,通过inderText将内容添加入DOM中。

render(h) {
  return h('div', {
   class: {
    btn: true,
    'btn-success': this.type === 'success',
    'btn-danger': this.type === 'danger',
    'btn-warning': this.type === 'warning'
   },
   domProps: {
    innerText: this.text
   },
   on: {
    click: this.handleClick
   }
  });
 },

vue中对虚拟dom的理解知识点总结: www.studyofnet.com/news/5142.h…