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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
Yii2中datetime类的使用
2016/12/17 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
python简易远程控制单线程版
2018/06/20 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python文件拆分与重组实例
2018/12/10 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python 如何实现访问者模式
2020/07/28 Python
python 绘制国旗的示例
2020/09/27 Python
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
历史专业大学生职业生涯规划书
2014/03/13 职场文书
转正申请报告格式
2015/05/15 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript