浅谈vue渲染方式render和template

小编这次要给大家分享的是浅谈vue渲染方式render和template，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

创新互联建站主要从事网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务高唐,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

render函数详解

Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中

createElement这个函数中有3个参数

第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数

第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类

第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的

// @return {VNode}
createElement(
 // {String | Object | Function}
 // 一个HTML标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数。该参数是必须的
 'div',

 // {Object}
 // 一个包含模板相关属性的数据对象，这样我们可以在template中使用这些属性，该参数是可选的。
{
   attrs: {
    name: headingId,
    href: '#'+headingId
  },
   style: {
    color: 'red',
    fontSize: '20px'
  },
   'class': {
    foo: true,
    bar: false
   },
   // DOM属性
   domProps: {
     innerHTML: 'baz'
   },
   // 组件props
    props: {
     myProp: 'bar'
   },
    // 事件监听基于 'on'
    // 所以不再支持如 'v-on:keyup.enter' 修饰语
    // 需要手动匹配 KeyCode 
    on: {
      click: function(event) {
        event.preventDefault();
        console.log(111);
     }
    }
 }

 // {String | Array}
 // 子节点（VNodes）由 createElement() 构建而成。可选参数
 // 或简单的使用字符串来生成的 "文本节点"。
[
  'xxxx',
  createElement('h2', '一则头条'),
  createElement(MyComponent, {
   props: {
    someProp: 'xxx'
  }
 }),
  this.$slots.default
]
)

什么时候用render函数？

假设我们要封装一套按钮组件，按钮有四个样式(success、error、warning、default)。首先，你可能会想到如下实现

虽然我们这样实现没有问题，但是如果现在有十几个样式的情况下我们就需要写N多个判断，如果遇到了这种情况我们就可以选择使用render函数。

其实简单的来说就是template适合简单的组件封装，然后render函数适合复杂的组件封装

template与render函数对比

template----html的方式做渲染
render----js的方式做渲染

render（提供）是一种编译方式
render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。
h就是createElement()方法：createElement(标签名称,属性配置,children)

template也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。

区别：
        1、render渲染方式可以让我们将js发挥到极致，因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强，适合复杂的组件封装。
        2、template是类似于html一样的模板来进行组件的封装。
        3、render的性能比template的性能好很多
        4、render函数优先级大于template

案例一：template和render的方式渲染标题标签：

  
  
  


  

    标题
    标题
    标题
  
  
  

案例二：render方式模拟button：

  
  
  
  


  

    成功
    提示
    报错
    默认
  
  
  

看完这篇关于浅谈vue渲染方式render和template的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。