• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Vue中render函数详解

互联网 diligentman 3小时前 2次浏览

render介绍

        众所周知,仅限于我大前端,Vue中的核心就是虚拟DOM。

        通常我们都会把我们的页面结构逻辑都写在 template 中,然后再通过vue将我们的代码转换成虚拟DOM,相比于真实DOM,虚拟DOM是通过js代码处理的,所以消耗的性能相对较小,当然大部分情况下使用 template 创建我们的HTML是可以的,但是在有些场景下,我们真的需要通过Javascript的完全编程的能力来完成时,就可以用到 render函数,比之 template 更接近编译器。

        render函数的作用就是返回一个虚拟dom,将该虚拟dom渲染成真实的dom。

new Vue({
  el: '#app',
  router,
  store,
  render: (h) => h(App) // createElement 创建虚拟DOM
})

render 函数有两个参数

export default {
  name: 'Test',
  // render作用:会return一个虚拟dom,return什么该组件就渲染什么
  render: (h, context) => { // 第二个参数context存储了一些其他组件传过来的数据
    console.log('context', context)
    // h(标签名/组件,{虚拟dom配置},子集:子虚拟dom,也是虚拟dom节点信息,支持字符串与数组)
    return h('h3', { class: 'abc' }, [h('h4', { class: 'abc2' }, '我是h4')])
  }
}

第一个参数 h 是 createElement 的缩写,其中有三个形参

  • 第一个参数可以是一个 HTML 标签字符串,组件选项对象或者是解析标签或者组件的一个 async 异步函数。必须参数
  • 第二个参数 { 虚拟dom配置 } ,一个包含虚拟DOM相关属性的数据对象。可选参数
  • 第三个参数 是子虚拟节点,支持字符串与数组。可选参数。 

第二个参数 context 可以拿到外部组件传进来的数据,如 prop、slots等

Vue中render函数详解

 其他选项

functional

  • 类型boolean

  • 详细

    使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使它们渲染的代价更小。

  • <script>
    export default {
      name: 'Test',
      /* 函数式组件。它内部的东西不是响应式了(就是需要什么东西就直接渲染什么东西,
      不需要进行其他操作了)。没有生命周期等其他东西了,节省性能,起到性能优化作用*/
      functional: true,
      // render作用:会return一个虚拟dom,return什么该组件就渲染什么
      render: (h, context) => { // 第二个参数存储了一些其他组件传过来的数据
        console.log('context', context)
        // h(标签名/组件,{虚拟dom配置},子集:也是虚拟dom节点信息支持字符串与数组)
        return h('h3', { class: 'abc' }, [h('h4', { class: 'abc2' }, '我是h4')])
      }
    }
    </script>
    


程序员灯塔
转载请注明原文链接:Vue中render函数详解
喜欢 (0)