在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。
如果你还不熟悉虚拟 DOM 和渲染函数的概念的话，请确保先阅读渲染机制章节。
Vue 提供了一个 函数用于创建 vnodes：
是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 ，但当你需要多次使用渲染函数时，一个简短的名字会更省力。
函数的使用方式非常的灵活：
得到的 vnode 为如下形式：
如果一个渲染函数组件不需要任何实例状态，为了简洁起见，它们也可以直接被声明为一个函数：
没错，这就是一个合法的 Vue 组件！参阅函数式组件来了解更多语法细节。
组件树中的 vnodes 必须是唯一的。下面是错误示范：
如果你真的非常想在页面上渲染多个重复的元素或者组件，你可以使用一个工厂函数来做这件事。比如下面的这个渲染函数就可以完美渲染出 20 个相同的段落：
JSX 是 JavaScript 的一个类似 XML 的扩展，有了它，我们可以用以下的方式来书写代码：
在 JSX 表达式中，使用大括号来嵌入动态值：
和 Vue CLI 都有预置的 JSX 语法支持。如果你想手动配置 JSX，请参阅 文档获取更多细节。
虽然最早是由 React 引入，但实际上 JSX 语法并没有定义运行时语义，并且能被编译成各种不同的输出形式。如果你之前使用过 JSX 语法，那么请注意 Vue 的 JSX 转换方式与 React 中 JSX 的转换方式不同，因此你不能在 Vue 应用中使用 React 的 JSX 转换。与 React JSX 语法的一些明显区别包括：
- 可以使用 HTML attributes 比如 和 作为 props - 不需要使用 或 。
- 传递子元素给组件 (比如 slots) 的方式不同。
Vue 的类型定义也提供了 TSX 语法的类型推导支持。当使用 TSX 语法时，确保在 中配置了 ，这样的 TypeScript 就能保证 Vue JSX 语法转换过程中的完整性。
与转换类似，Vue 的 JSX 也需要不同的类型定义。
从 Vue 3.4 开始，Vue 不再隐式注册全局 命名空间。要指示 TypeScript 使用 Vue 的 JSX 类型定义，请确保在你的 中包含以下内容：
你也可以通过在文件的顶部加入 注释来选择性地开启。
如果仍有代码依赖于全局存在的 命名空间，你可以在项目中通过显式导入或引用 来保留 3.4 之前的全局行为，它注册了全局 命名空间。
下面我们提供了几个常见的用等价的渲染函数 / JSX 语法，实现模板功能的案例：
模板：
等价于使用如下渲染函数 / JSX 语法：
模板：
等价于使用如下渲染函数 / JSX 语法：
以 开头，并跟着大写字母的 props 会被当作事件监听器。比如， 与模板中的 等价。
对于 、 和 事件修饰符，可以使用驼峰写法将他们拼接在事件名后面：
实例：
对于事件和按键修饰符，可以使用 函数：
在给组件创建 vnode 时，传递给 函数的第一个参数应当是组件的定义。这意味着使用渲染函数时不再需要注册组件了 —— 可以直接使用导入的组件：
不管是什么类型的文件，只要从中导入的是有效的 Vue 组件， 就能正常运作。
动态组件在渲染函数中也可直接使用：
如果一个组件是用名字注册的，不能直接导入 (例如，由一个库全局注册)，可以使用 来解决这个问题。
向组件传递子元素的方式与向元素传递子元素的方式有些许不同。我们需要传递一个插槽函数或者是一个包含插槽函数的对象而非是数组，插槽函数的返回值同一个正常的渲染函数的返回值一样——并且在子组件中被访问时总是会被转化为一个 vnodes 数组。
等价 JSX 语法：
插槽以函数的形式传递使得它们可以被子组件懒调用。这能确保它被注册为子组件的依赖关系，而不是父组件。这使得更新更加准确及有效。
为了在父组件中渲染作用域插槽，需要给子组件传递一个插槽。注意该插槽现在拥有一个 参数。该插槽将在子组件中被调用，同时子组件中的数据将向上传递给父组件。
记得传递 以避免插槽被误认为 prop：
等同于 JSX：
诸如 、、、 和 等内置组件在渲染函数中必须导入才能使用：
指令扩展为 和 在模板编译过程中，我们必须自己提供这些 props：
可以使用 将自定义指令应用于 vnode：
当一个指令是以名称注册并且不能被直接导入时，可以使用 函数来解决这个问题。
函数式组件是一种定义自身没有任何状态的组件的方式。它们很像纯函数：接收 props，返回 vnodes。函数式组件在渲染过程中不会创建组件实例 (也就是说，没有 )，也不会触发常规的组件生命周期钩子。
我们用一个普通的函数而不是一个选项对象来创建函数式组件。该函数实际上就是该组件的渲染函数。
大多数常规组件的配置选项在函数式组件中都不可用，除了 和 。我们可以给函数式组件添加对应的属性来声明它们：
如果这个 选项没有被定义，那么被传入函数的 对象就会像 一样会包含所有 attribute。除非指定了 选项，否则每个 prop 的名字将不会基于驼峰命名法被一般化处理。
对于有明确 的函数式组件，attribute 透传的原理与普通组件基本相同。然而，对于没有明确指定 的函数式组件，只有 、 和 事件监听器将默认从 中继承。在这两种情况下，可以将 设置为 来禁用属性继承：
函数式组件可以像普通组件一样被注册和使用。如果你将一个函数作为第一个参数传入 ，它将会被当作一个函数式组件来对待。
函数式组件可以根据它们是否有命名来标注类型。在单文件组件模板中，Vue - Official 扩展还支持对正确类型化的函数式组件进行类型检查。
具名函数式组件
匿名函数式组件
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/11385.html