Vue - template

Vue 官方推荐使用template语法来创建应用，虽然写法像html，但Vue最终会把template解析为render函数返回虚拟DOM，这点可以在Vue Dev Tools中看到：

template渲染流程：

因此在某些特定情况下，我们可以直接使用render函数来实现我们的组件。

示例

根据接口返回的数值level，动态渲染标题组件h1~h6。

采用Vue的模板语法，实现如下：

不过实现过程有些冗余了。因此我们可以使用render函数来动态返回我们的组件。在此之前我们需要先了解下Vue中的h函数；

Vue - Render & H

h 函数

h函数是Vue创建一个Vnode的函数。



     hello,world

等价于

let vnode = h(
                'div',     //标签名
                {
                    class: 'className',
                    style: { color: 'red' },
                    onClick() {
                        console.log("点击事件")
                    }
                },         ///标签属性
                h(         ///子节点
                    'h1',
                    'hello,world'
                ),
              )

render函数

render函数在Vue中可以代替template标签，直接返回虚拟DOM。

接下来，我们使用render函数的方式实现示例需求，有三种写法：

Vue 2

Vue 3

Vue 3 变体

注意：setup语法糖是不能直接使用render函数的。

render函数除了返回单个vNode外，也可以返回字符串和数组，不过组件树中的vNodes必须是唯一的（同一个vNode实例，不能在组件中多次使用）。

极简且合法的Vue组件:

function Hello() {
 return 'hello world!'
}

小结

render函数+h函数虽可以处理动态性较高的场景，但是遇到复杂的组件时h函数层层嵌套，各种属性对象，写起来很复杂 ~ ~；有没有简单，方便的写法呢？说到这里，就不得不说说JSX。

Vue - Render & JSX

JSX

JSX 是在JavaScript 语法上的拓展，允许 HTML 代码和 JS 一起写。
与React框架的结合是比较紧密的。

///JSX 表达式 :单行代码
const heading = Mozilla Developer Network; 
///JSX 表达式:多行代码
const header = (
  
    Mozilla Developer Network
  
);

与React一样，Vue会将JSX表达式，经过parcel或babel编译后，转换为创建虚拟DOM节点的函数。不同的是:React是React.createElement函数，而Vue是createVNode：

///React JSX 编译后
const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);
///Vue JSX 编译后
const header = createVNode("header", null,
  createVNode("h1", null, "Mozilla Developer Network")
);

Vue JSX编译后的产物，在Vue Dev Tools也能看见：

因此在Vue中要想使用JSX，则必须安装可以将JSX表达式转换为createVNode的编译器插件。

环境

场景一：
Vue新项目，若要使用JSX，则在Vue项目创建时，配置支持JSX，如此Vue便会自动帮我们配置好JSX的编译插件。

场景二：
Vue非新建项目，若要使用JSX:

# -D @vitejs/plugin-vue-jsx 插件 开发环境下有效
npm install @vitejs/plugin-vue-jsx -D

其次找到vite.config.js文件，配置plugin-vue-jsx插件如下：

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  plugins: [vue(),vueJsx()]
})

使用

新建文件后缀更名.jsx，文件内容不再需要写

Vue 渲染函数 & JSX