JSX和template区别和使用场景

1.

在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数返回 h 函数的执行结果去返回虚拟 DOM：

也就是：vue3=>template=>render函数(返回h函数执行结果)=>虚拟dom

 

 

2.

由于 render 函数可以直接返回虚拟 DOM，因而我们就不再需要 template。

也就是：render函数(返回h函数执行结果)=>虚拟dom

import { defineComponent, h } from 'vue'

// 我们使用 defineComponent 定义一个组件，组件内部配置了 props 和 setup。

export default defineComponent({

    props: {

        level: {

            type: Number,

            required: true

        }

    },

    // 这里的 setup 函数返回值是一个函数，就是我们所说的 render 函数。

    setup(props, { slots }) {

        // ---------方式一创建---------------

        // render 函数返回 h 函数的执行结果，h 函数的第一个参数就是标签名，

        // 像这种连标签名都需要动态处理的场景，就需要通过手写 h 函数来实现。

        // return () => h(

        //     'h' + props.level, // 标签名

        //     {}, // prop 或 attribute

        //     slots.default() // 子节点

        // )

        // ---------方式二创建---------------

        const tag = 'h' + props.level

        return () => <tag>{slots.default()}</tag>

    }

})

手写的 h 函数，可以处理动态性更高的场景。但是如果是复杂的场景，h 函数写起来就显得非常繁琐，需要自己把所有的属性都转变成对象。并且组件嵌套的时候，对象也会变得非常复杂。

不过，因为 h 函数也是返回虚拟 DOM 的，所以有没有更方便的方式去写 h 函数呢？

答案是肯定的，这个方式就是 JSX，如下：

const element = <h1 id="app">Hello, Geekbang!</h1>

这种在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展。上面的代码直接在 JavaScript 环境中运行时，会报错。

JSX 的本质就是下面代码的语法糖：

const element = createVnode('h1',{id:"app"}, 'hello Geekbakg')

h 函数内部也是调用 createVnode 来返回虚拟 DOM。对于那些创建虚拟 DOM 的函数，我们统一称为 h 函数。

3.

JSX 和 Template如何选择？

(1）JSX 可以支持更动态的需求。而 template 则因为语法限制原因，不能够像 JSX 那样可以支持更动态的需求。这是 JSX 相比于 template 的一个优势。

(2) template 牺牲灵活性换来了静态标记的收益:

就是重复执行 render 的时候，比如，代码里的 h1 这个纯静态的标签，就不需要进行额外地计算，并且静态标签在虚拟 DOM 计算的时候，会直接越过 Diff 过程，

这也是 Vue 3 的虚拟 DOM 能够比 Vue 2 快的一个重要原因。

(3) 我们实现业务需求的时候，也是优先使用 template，动态性要求较高的组件使用 JSX 实现

 

总结：

今天主要学习了 Vue 3 中的 JSX。

首先学习了 h 函数，简单来说，h 函数内部执行 createVNode，并返回虚拟 DOM，而 JSX 最终也是解析为 createVnode 执行。

而在一些动态性要求很高的场景下，很难用 template 优雅地实现，所以我们需要 JSX 实现。因为 render 函数内部都是 JavaScript 代码，所以 render 函数相比于 template 会更加灵活，但是 h 函数手写起来非常的痛苦，有太多的配置，所以我们就需要 JSX 去方便快捷地书写 render 函数。

JSX 的语法来源于 React，在 Vue 3 中会直接解析成 h 函数执行，所以 JSX 就拥有了 JS 全部的动态性。最后，我们对比了 JSX 和 template 的优缺点，template 由于语法固定，可以在编译层面做的优化较多，比如静态标记就真正做到了按需更新；而 JSX 由于动态性太强，只能在有限的场景下做优化，虽然性能不如 template 好，但在某些动态性要求较高的场景下，JSX 成了标配，这也是诸多组件库会使用 JSX 的主要原因