百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

19《Vue 入门教程》Vue 渲染函数_vue渲染函数实战

ztj100 2025-09-12 06:14 4 浏览 0 评论

1. 简介

本小节我们将介绍 Vue 渲染函数。包括什么是渲染函数、虚拟 DOM、如何编写渲染函数。渲染函数是一个难点，通常在一些简单的项目中不会使用，在处理一些复杂的业务场景时，使用渲染函数往往可以达到事半功倍的效果。

通过本小节的学习我们可以掌握渲染函数的基本用法，如果同学们学完本小节之后对此还不是特别熟悉也没有关系，我们可以先将基础知识融会贯通，然后再对该知识点多加练习，相信同学们一定可以熟练掌握。

2. 基础

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

让我们用一个简单的例子来学习，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题，标题的尺寸和锚点的地址需要通过属性传递，最终生成如下格式的 DOM 结构：

<h1>
  <a href="#hello-world">
    Hello world!
  </a>
</h1>

同学们肯定觉得这不是很简单吗，于是写下了如下示例：

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <anchored-heading :level="1" href="#hello-wold">Hello world!</anchored-heading>
    <anchored-heading :level="2" href="#hello-wold">Hello world!</anchored-heading>
    <anchored-heading :level="3" href="#hello-wold">Hello world!</anchored-heading>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <a :href="href">
      <slot></slot>
    </a>
  </h1>
  <h2 v-else-if="level === 2">
    <a :href="href">
      <slot></slot>
    </a>
  </h2>
  <h3 v-else-if="level === 3">
    <a :href="href">
      <slot></slot>
    </a>
  </h3>
  <h4 v-else-if="level === 4">
   <a :href="href">
      <slot></slot>
    </a>
  </h4>
  <h5 v-else-if="level === 5">
    <a :href="href">
      <slot></slot>
    </a>
  </h5>
  <h6 v-else-if="level === 6">
    <a :href="href">
      <slot></slot>
    </a>
  </h6>
</script>
<script type="text/javascript">
  Vue.component('anchored-heading', {
    template: '#anchored-heading-template',
    props: {
      level: {
        type: Number,
        required: true
      },
      href: {
        type: String,
        default: ''
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
        return {}
    }
  })
</script>
</html>

"运行案例" 可查看在线运行效果

代码解释： JS 代码第 2-33 行，我们定义了组件的模板，通过 v-if 根据传入的 level 来控制显示的标签元素。 JS 代码第 34-46 行，我们定义了组件 anchored-heading，接收 level 和 href 两个属性参数。 HTML 代码第 2-4 行，使用了组件 anchored-heading。

上述代码虽然实现了功能，但是代码冗长，而且在每一个级别的标题中重复书写了 <a :href="href"><slot></slot></a>。那么如何才能消除这些冗余的代码呢？我们来尝试使用 render 函数重写上面的例子：

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <anchored-heading :level="1" href="#hello-wold">Hello world!</anchored-heading>
    <anchored-heading :level="2" href="#hello-wold">Hello world!</anchored-heading>
    <anchored-heading :level="3" href="#hello-wold">Hello world!</anchored-heading>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script type="text/javascript">
  Vue.component('anchored-heading', {
    render: function (createElement) {
      return createElement(
        'h' + this.level,   // 标签名称
        
        [createElement('a', {
          attrs: {
            href: this.href
          }
        },this.$slots.default)]
        
      )
    },
    props: {
      level: {
        type: Number,
        required: true
      },
      href: {
        type: String,
        default: ''
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
        return {}
    }
  })
</script>
</html>

"运行案例" 可查看在线运行效果

通过 render 函数编写的组件看起来简单多了！同学们可能暂时还不太理解这段代码的含义，createElement 是什么？ 这些参数又表示什么含义？我们先带着这些疑问继续往下学习。

3. 虚拟 DOM

Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码：

return createElement('h1', this.blogTitle)

createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为 “虚拟节点 (virtual node)”，也常简写它为 “VNode”。“虚拟 DOM” 是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

4. createElement 参数

接下来你需要熟悉的是如何在 createElement 函数中使用模板中的那些功能。这里是 createElement 接受的参数：

createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

也就是说，我们通过 createElement 函数来递归创建我们的节点标签。

5. 深入数据对象

有一点要注意：正如 v-bind:class 和 v-bind:style 在模板语法中会被特别对待一样，它们在 VNode 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML attribute，也允许绑定如 innerHTML 这样的 DOM 属性 (这会覆盖 v-html 指令)。

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层属性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

现在我们再来回顾上述的例子是不是很简单？

  • 首先，我们通过 createElement 函数创建 h 标签；
  • 它的子集是 createElement 函数创建的 a 标签；
  • a 标签的子集是通过 this.$slots.default 获取的默认插槽。

6. 小结

本节，我们带大家学习了 Vue 渲染函数的使用方法。主要知识点有以下几点：

  • 使用渲染函数 render 代替 template 模板。
  • 虚拟 DOM 的定义，createElement 函数的使用。

相关推荐

sharding-jdbc实现`分库分表`与`读写分离`

一、前言本文将基于以下环境整合...

三分钟了解mysql中主键、外键、非空、唯一、默认约束是什么

在数据库中，数据表是数据库中最重要、最基本的操作对象，是数据存储的基本单位。数据表被定义为列的集合，数据在表中是按照行和列的格式来存储的。每一行代表一条唯一的记录，每一列代表记录中的一个域。...

MySQL8行级锁_mysql如何加行级锁

MySQL8行级锁版本：8.0.34基本概念...

mysql使用小技巧_mysql使用入门

1、MySQL中有许多很实用的函数，好好利用它们可以省去很多时间:group_concat()将取到的值用逗号连接，可以这么用:selectgroup_concat(distinctid)fr...

MySQL/MariaDB中如何支持全部的Unicode?

永远不要在MySQL中使用utf8，并且始终使用utf8mb4。utf8mb4介绍MySQL/MariaDB中，utf8字符集并不是对Unicode的真正实现，即不是真正的UTF-8编码，因...

聊聊 MySQL Server 可执行注释，你懂了吗?

前言MySQLServer当前支持如下3种注释风格：...

MySQL系列-源码编译安装(v5.7.34)

一、系统环境要求...

MySQL的锁就锁住我啦!与腾讯大佬的技术交谈，是我小看它了

对酒当歌，人生几何！朝朝暮暮，唯有己脱。苦苦寻觅找工作之间，殊不知今日之事乃我心之痛，难道是我不配拥有工作嘛。自面试后他所谓的等待都过去一段时日，可惜在下京东上的小金库都要见低啦。每每想到不由心中一...

MySQL字符问题_mysql中字符串的位置

中文写入乱码问题：我输入的中文编码是urf8的，建的库是urf8的，但是插入mysql总是乱码，一堆"???????????????????????"我用的是ibatis，终于找到原因了，我是这么解决...

深圳尚学堂:mysql基本sql语句大全(三)

数据开发-经典1.按姓氏笔画排序:Select*FromTableNameOrderByCustomerNameCollateChinese_PRC_Stroke_ci_as//从少...

MySQL进行行级锁的?一会next-key锁，一会间隙锁，一会记录锁?

大家好，是不是很多人都对MySQL加行级锁的规则搞的迷迷糊糊，一会是next-key锁，一会是间隙锁，一会又是记录锁。坦白说，确实还挺复杂的，但是好在我找点了点规律，也知道如何如何用命令分析加...

一文讲清怎么利用Python Django实现Excel数据表的导入导出功能

摘要：Python作为一门简单易学且功能强大的编程语言，广受程序员、数据分析师和AI工程师的青睐。本文系统讲解了如何使用Python的Django框架结合openpyxl库实现Excel...

用DataX实现两个MySQL实例间的数据同步

DataXDataX使用Java实现。如果可以实现数据库实例之间准实时的...

MySQL数据库知识_mysql数据库基础知识

MySQL是一种关系型数据库管理系统；那废话不多说，直接上自己以前学习整理文档：查看数据库命令:(1).查看存储过程状态:showprocedurestatus;(2).显示系统变量:show...

如何为MySQL中的JSON字段设置索引

背景MySQL在2015年中发布的5.7.8版本中首次引入了JSON数据类型。自此，它成了一种逃离严格列定义的方式，可以存储各种形状和大小的JSON文档，例如审计日志、配置信息、第三方数据包、用户自定...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2023011147号-29