render函数

render 函数的作用

  • 简单的说,在vue中使用模板HTML语法组建页面,使用render函数可以用js语言来构建DOM

  • 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。

  • 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,

栗子:根据 data 中 level 的值,用不同标题标签显示文本:

哆啦A梦
Vue.component('child-component', { props: ['level'], template: `

` }) var app = new Vue({ el: '#app', data: { level: 1 } })

将 level 的值改成 1,会渲染 template 中的 h1 标签。

实际开发中可能会把 template 写得巨长;使用 render 函数来实现上面的 demo:

哆啦A梦

渲染效果与上面使用 template 一致。
使用 render函数 比 template 要简洁很多。

render函数用法

  • render函数可以接收 createElement 作为参数,并且必须是 createElement;
  • createElement 也是一个函数;
  • createElement 可以传三个参数(上面只传了两个);
    第一个参数必需,可以是 String / Object / Function 类型;
    第二个参数可选,只能是 Object 类型;
    第三个参数可选,可以是 String / Array 类型。

createElement 的第一个参数

  • 第一个参数必选
  • 可以是string - html标签
  • 可以是object -- 一个含有数据选项的对象
  • 可以是function ---方法返回含有数据选项的对象

    

createElement 的第二个参数

  • 第二个参数可选,只能是 Object 类型,Object 中可以设置元素的一些属性。
    

createElement 的第三个参数

  • 第三个参数可选, 可以是 String | Array ---代表子节点
    

你可能感兴趣的:(render函数)