浅谈vue中render函数

官网内容：https://cn.vuejs.org/v2/guide/render-function.html

vue 推荐在绝大多数情况下使模板来创建 HTML 。就是我们都会吧页面的结构写在 template 中，然后再通过 vue 将我们的代码转换成虚拟DOM ，相比对真实DOM ，虚拟 DOM 是通过 js 代码处理的，所以消耗的性能相对较小，当然大部分情况下使用 template 创建我们的 HTML 是可以的；但是在有些场景下，我们真的需要通过 js 的完全编程的能力来完成时，就可以用到 render 函数。

 

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

基础用法

render: function(createElement){
  return createElement()  
}

// createElement 参数
// 在 createElement 函数中使用模板中的那些功能。这里是 createElement 接受的参数：
createElement(
    // {String | Object | Function}
    // 一个 HTML 标签名、组件选项对象，或者resolve 了上述任何一种的一个 async 函数。
    // 必填项。
  'div',
   // {Object} 参考 官网文档深入数据对象
  // 一个与模板中 attribute 对应的数据对象。可选。     
  {
     attrs: { title: this.title }，
　　　　// 接受一个字符串、对象，或对象组成的数组 
     style: { color: 'red', fontSize: '14px' }, 
  },
    // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
   [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ] 
)

render 函数有两个参数

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

第一个参数 h 是 createElement 的缩写，其中有三个参数，在上面已介绍。

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

 

render方法的实质就是生成template模板；

render函数生成的内容相当于template的内容，所以使用render函数时，在.vue文件中需要先把template标签去掉。只保留逻辑层。

意思很明白，在脚手架生成的项目中，.vue文件是通过template渲染的虚拟dom，template底层也是使用的render函数。一个组件最终的模板只能有一个，所以如果在项目中（.vue文件）使用render函数，就要去掉template标签；并且你只能作为组件来使用，不可能整个页面都用render函数js手写页面吧~

如此，便解决了我莫大的疑问。

 

案例参考

https://blog.csdn.net/weixin_45844049/article/details/114277643?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-114277643-blog-121456284.pc_relevant_paycolumn_v3&spm=1001.2101.3001.4242.2&utm_relevant_index=4

https://www.shuzhiduo.com/A/kjdwaQMAJN/