Vue h函数的使用

---

theme: smartblue

highlight: monokai

一、认识

文档：https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91

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

二、使用

文档：https://v3.cn.vuejs.org/guide/render-function.html#h-%E5%8F%82%E6%95%B0

1、h() 参数

h() 函数是一个用于创建 VNode 的实用程序。也许可以更准确地将其命名为 createVNode()，但由于频繁使用和简洁，它被称为 h() 。它接受三个参数：

```javascript // @returns {VNode} h( // {String | Object | Function} tag // 一个 HTML 标签名、一个组件、一个异步组件、或 // 一个函数式组件。 // // 必需的。 'div',

// {Object} props
// 与 attribute、prop 和事件相对应的对象。
// 这会在模板中用到。
//
// 可选的(在开发时。建议传，实在没有传的时候，传入 null)
{},

// {String | Array | Object} children
// 子 VNodes, 使用 `h()` 构建,
// 或使用字符串获取 "文本 VNode" 或者
// 有插槽的对象。
//
// 可选的。
[
    'Some text comes first.',
    h('h1', 'A headline'),
    h(MyComponent, {
        someProp: 'foobar'
    })
]

) ```

2、简单的使用

3、实现一个计数器案例

```javascript

```

修改成纯setup的写法：

```javascript

```

4、函数组件和插槽的使用

1)父组件

```javascript

```

2)子组件

```javascript

```

注：在项目中，如果你像上面一样写代码，就太苦逼了，所以这个时候就要用 JSX。

三、jsx的使用

1、jsx的认识

jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的)；

对于Vue来说，我们只需要在Babel中配置对应的插件即可；

文档：https://v3.cn.vuejs.org/guide/render-function.html#jsx

2、下载Babel插件支持vue(现在貌似脚手架直接支持)

bash npm install @vue/babel-plugin-jsx -D

3、配置babel

1)在根目录下创建 .babel.config.js

2)在.babel.config.js 里面加入，如下代码

javascript module.exports = { presets: [ "@/vue/cli-plugin-babel/preset" ], plugins: [ "@vue/babel-plugin-jsx" ] }

4、简单的使用

```javascript

```

5、计数器案例

```javascript

```

6、组件和插槽的使用

1)父组件

```javascript

```

2)子组件

```javascript

```

 注：如果你要h函数来写组件，请仔细查看文档，以上讲解，只是入门级。