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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
JMenuTab简单使用说明
Mar 13 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
js实现打字小游戏
Dec 17 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中格式化format()方法详解
2017/04/01 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
把pandas转换int型为str型的方法
2019/01/29 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Django框架反向解析操作详解
2019/11/28 Python
python实现五子棋程序
2020/04/24 Python
python脚本第一行如何写
2020/08/30 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
TCP/IP模型的分界线
2012/12/01 面试题
师生聚会感言
2014/01/26 职场文书
体育个人工作总结
2015/02/09 职场文书
免职通知
2015/04/23 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript