Vue躬行记(7)——渲染函数和JSX

2024-05-13 21:58

本文主要是介绍Vue躬行记(7)——渲染函数和JSX,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉。注意,Vue的模板最终都会被编译成渲染函数。

一、渲染函数

  虽然在大部分场景中,都会选择直观而清晰的模板,但遇到一些复杂的场景时,就不得不使用渲染函数render()了。

1)render()

  假设有一个page组件,它会根据外部传入的type特性,有选择的渲染,其模板如下所示。

<script type="text/x-template" id="template"><h1 v-if="type == 1"><slot></slot></h1><h2 v-else-if="type == 2"><slot></slot></h2><h3 v-else-if="type == 3"><slot></slot></h3>
</script>
<script>Vue.component("page", {template: '#template',props: ["type"]});
</script>

  在模板中,充斥着冗余的<slot>元素,并且如果要增加分支,那么还得修改模板,即插入新的条件指令、标题元素和插槽。显然,在这个场景中不适合用模板,接下来替换成render()函数,代码不仅简洁而且更易维护,如下所示。

Vue.component("page", {render: function (createElement) {return createElement("h" + this.type,this.$slots.default);},props: ["type"]
});

  render()函数能接收一个createElement()方法,并返回一个VNode。Vue通过虚拟DOM来高性能的变更真实DOM,而VNode是虚拟节点(Virtual Node)的简写。实例属性$slots是一个对象,其键是插槽的名称,可访问分发给插槽的内容,代码中的default是指默认插槽。

  注意,若render()函数存在,那么Vue就不会编译template选项中的模板和从el选项所挂载的元素中提取出的模板,即不会将它们转换成渲染函数。

2)createElement()

  该方法可接收3个参数:标签名称、数据对象和虚拟子节点。除了标签名称必传之外,其余两个参数都是可选的,接下来会对这3个参数进行逐一讲解。

  标签名称既可以是一段字符串,也可以是一个返回字符串的函数。并且由于render()函数可以访问this,因此标签名称还可以是data选项的属性、计算属性等,如下所示。

Vue.component("btn", {render: function (createElement) {return createElement(this.tag);},data: function() {return { tag: "button" }}
});

  数据对象是一个配置信息集合,包含了组件所需的属性以及DOM元素的特性和属性,例如样式、插槽、ref、自定义指令、事件和props等,下面只列出了数据对象的部分字段。

Vue.component("btn", {render: function(createElement) {return createElement(this.tag, {style: { color: "red" },                //与v-bind:style的功能相同attrs: { id: "btn" },                   //DOM元素特性domProps: { innerHTML: "提交" },         //DOM元素属性on: { click: this.handler }             //事件监听器
    });},methods: {handler: function() {console.log("click");}}
});

  Vue还为on选项中的事件提供了与.passive、.capture和.once三个修饰符相对应的前缀,如下所示。

on: {"&click": this.handler,        //.passive"!click": this.handler,        //.capture"~click": this.handler         //.once
}

  虚拟子节点既可以是字符串,也可以是数组,如下所示。注意,如果需要省略数据对象,那么可直接将虚拟子节点作为第二个参数传入。

Vue.component("c-article", {render: function (createElement) {return createElement("div",["标题", createElement("h2", "副标题")]);}
});

  官方规定组件树中的所有VNode必须要唯一,虽然像下面这样重复引用同一个VNode是不合法的,但是在渲染时并不会报错,仍然能呈现内容。

Vue.component("c-article", {render: function(createElement) {var h1 = createElement("h1", "标题");return createElement("div",[h1, h1]);}
});

二、JSX

  如果要在Vue中使用JSX语法,那么需要先安装一个Babel插件,安装命令如下所示。

npm install @vue/babel-preset-jsx --save-dev

  在安装完之后,就可在配置文件babel.config.js中对其进行配置,如下所示。

module.exports = {presets: ["@vue/babel-preset-jsx"]
};

  经过这一系列的操作后,就能以JSX语法来创建模板,如下所示,为按钮注册了点击事件。注意,render()函数的h参数是createElement的别名。

Vue.component("btn", {render: function(h) {return (<button vOn:click={this.handler}>ok</button>);
  },methods: {handler: function() {console.log("click");}}
});

  假设上面的代码保存在default.js文件中,并且当前处在该文件的目录中,执行下面这条编译命令,会将编译后的代码保存到当前目录的dist.js文件中。

npx babel default.js --out-file dist.js

  dist.js文件中的代码如下所示,那段JSX代码自动转换成了createElement()方法。

Vue.component("btn", {render: function (h) {return h("button", {"on": {"click": this.handler}}, ["ok"]);},methods: {handler: function () {console.log("click");}}
});

这篇关于Vue躬行记(7)——渲染函数和JSX的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/986937

相关文章

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数(ScopeFunctions)是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言:为什么需要作用域函数?二、作用域函China编程数详解1. apply:对象配置的 “流式构建器”最

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

C++中::SHCreateDirectoryEx函数使用方法

《C++中::SHCreateDirectoryEx函数使用方法》::SHCreateDirectoryEx用于创建多级目录,类似于mkdir-p命令,本文主要介绍了C++中::SHCreateDir... 目录1. 函数原型与依赖项2. 基本使用示例示例 1:创建单层目录示例 2:创建多级目录3. 关键注

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

kotlin的函数forEach示例详解

《kotlin的函数forEach示例详解》在Kotlin中,forEach是一个高阶函数,用于遍历集合中的每个元素并对其执行指定的操作,它的核心特点是简洁、函数式,适用于需要遍历集合且无需返回值的场... 目录一、基本用法1️⃣ 遍历集合2️⃣ 遍历数组3️⃣ 遍历 Map二、与 for 循环的区别三、高

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js