Vue3 高级语法（一）—

Vue3 高级语法（一）—— h函数、jsx

一、认识h函数

Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用渲染函数，它比模板更接近编译器；

前面我们讲解过VNode和VDOM的改变：

Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM）；
事实上，我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode；
那么，如果你想充分的利用JavaScript的编程能力，我们可以自己来编写 createVNode 函数，生成对应的VNode；

那么我们应该怎么来做呢？使用 h()函数：

h() 函数是一个用于创建 vnode 的一个函数；
其实更准确的命名是 createVNode() 函数，但是为了简便在Vue将之简化为 h() 函数；

二、h()函数如何使用呢？

h()函数如何使用呢？它接受三个参数：
在这里插入图片描述

注意事项：

如果没有props，那么通常可以将children作为第二个参数传入；
如果会产生歧义，可以将null作为第二个参数传入，将children作为第三个参数传入；

三、h函数的基本使用

h函数可以在两个地方使用：

render函数选项中；
setup函数选项中（setup本身需要是一个函数类型，所有需要在箭头函数中再返回h函数创建的VNode）；

render函数实现计数器

在这里插入图片描述

<script>
import {h} from "vue";export default {data() {return {counter: 0}},render() {return h('div', {class: 'app'}, [h('h2', null, `当前计数：${this.counter}`),h('button', {onClick: () => this.counter++}, '+1'),h('button', {onClick: () => this.counter--}, '-1')])}
}
</script><style scoped>
</style>

setup函数实现计数器

在这里插入图片描述

<script>
import {h, ref} from "vue";export default {// data() {//   return {//     counter: 0//   }// },setup() {const counter = ref(0)return () => {return h('div', {class: 'app'}, [h('h2', null, `当前计数：${counter.value}`),h('button', {onClick: () => counter.value++}, '+1'),h('button', {onClick: () => counter.value--}, '-1')])}}
}
</script><style scoped>
</style>

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

在这里插入图片描述

在这里插入图片描述
Home.vue:

<script>
import {h, ref} from "vue";
import HelloWorld from "./HelloWorld.vue";export default {render() {return h(HelloWorld, null, {default: props => h('span', null, `app传到HelloWorld组件中的内容: ${props.name}`)})}
}
</script><style scoped>
</style>

HelloWorld.vue:

<script>
import {h} from "vue";export default {render() {return h('div', null, [h('h2', null, 'Hello World!'),this.$slots.default ? this.$slots.default({name: 'zep'}) : h('span', null, '我是hellowrold插槽的默认值')])}
}
</script><style scoped></style>

五、jsx的babel配置

如果我们希望在项目中使用jsx，那么我们需要添加对jsx的支持：

jsx我们通常会通过Babel来进行转换（React编写的jsx就是通过babel转换的）；
对于Vue来说，我们只需要在Babel中配置对应的插件即可；

注意：新版本的vue-cli中不需要进行安装和配置操作了！
安装Babel支持Vue的jsx插件：

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

在babel.config.js配置文件中配置插件：

在这里插入图片描述

六、jsx计数器案例

在这里插入图片描述

<script>
import {ref} from "vue";export default {setup() {const counter = ref(0)const increment = () => {counter.value++}const decrement = () => {counter.value--}return {counter,increment,decrement}},render() {return (<div><div>当前计数: {this.counter}</div><button onClick={this.increment}>+1</button><button onClick={this.decrement}>-1</button></div>)}
}
</script><style scoped>
</style>