vue渲染方式render和template的区别


Posted in Javascript onJune 05, 2020

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('h1', '一则头条'),
  createElement(MyComponent, {
   props: {
    someProp: 'xxx'
  }
 }),
  this.$slots.default
]
)

什么时候用render函数?

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

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

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

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

<script>
Vue.component("A-button", {
    props: {
      type: {
        type: String,
        default: 'default'
     },
      text: {
        type: String,
        default: '按钮'
     }
   },
    computed: {
      tag() {
        switch(this.type) {
          case'success':
            return1;
          case'danger':
            return2;
          case'warning':
            return3;
          default:
            return1;
       }
     }
   },
    render(h) {
      returnh('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
       }
     },
      this.$slots.default
     );
   },
    methods: {
      handleClick() {
        console.log('-----------------------');
        console.log('li');
     }
   }
 })

  letvm=newVue({
    el: "#app"
 })
</script>

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的方式渲染标题标签:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h-title level="1">标题</h-title>
    <h-title level="2">标题</h-title>
    <h-title level="3">标题</h-title>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    Vue.component("h-title",{
      /*  template渲染  */
      // template:`
      //   <div>
      //     <h1 v-if="level==1"><slot></slot></h1>  
      //     <h2 v-else-if="level==2"><slot></slot></h2>  
      //     <h3 v-else-if="level==3"><slot></slot></h3>  
      //   </div>
      // `,
      
      /*  render渲染  */
      render:function(h){
        // createElement(标签名称,属性配置,children)
        return h("h"+this.level,
          {
            attrs:{
              "data-id":10
            }
          },
          // 相当于<slot></slot>标签接收
          this.$slots.default
        )
      },
      props:{
        level:{
          type:String
        }
      }
    });
    let vm=new Vue({
      el:"#app"
    });
  </script>
</body>
</html>

案例二:render方式模拟button:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0;padding: 0;}
    .btn{
      width: 80px;
      line-height: 40px;
      text-align: center;
      color:#fff;
      border-radius: 5px;
      background-color: #ccc;
    }
    .success{background-color: green;}
    .error{background-color: red;}
    .info{background-color: pink;}
  </style>
</head>
<body>
  <div id="app">
    <wql-button type="success">成功</wql-button>
    <wql-button type="info">提示</wql-button>
    <wql-button type="error">报错</wql-button>
    <wql-button>默认</wql-button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component("wql-button",{
      render:function(h){
        return h("div",{
          class:{
            btn:true,
            success:this.type=="success",
            error:this.type=="error",
            info:this.type=="info"
          }
        },this.$slots.default);
      },
      props:{
        type:{
          type:String
        }
      }
    });
    let vm=new Vue({
      el:"#app"
    });
  </script>
</body>
</html>

到此这篇关于vue渲染方式render和template的区别的文章就介绍到这了,更多相关vue render template区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
jQuery each函数源码分析
May 25 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 #Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 #Javascript
VueX模块的具体使用(小白教程)
Jun 05 #Javascript
Vuex的热更替如何实现
Jun 05 #Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 #Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 #Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 #Javascript
You might like
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
浅析php原型模式
2014/11/25 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
JS中的三个循环小结
2017/06/20 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
python实现查询苹果手机维修进度
2015/03/16 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
利用python进行文件操作
2020/12/04 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
上班迟到检讨书范文300字
2014/11/02 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers