Vue3 高级语法（一）—

一、认识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>

七、jsx组件的使用

Vue3 高级语法（一）—— h函数、jsx相关推荐

Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 ...
Vue3 setup语法糖勾子函数使用简易教程（上）
Vue3 setup语法糖勾子函数使用简易教程(上) 前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. ...
Vue3 高级语法以及自定义组件
文章目录 1 .render函数 1. 1 h函数 1 .1 .1 h()函数的基本使用 1 .1 .2 h()函数中组件与插槽的使用 1 .2 jsx语法糖 1 .2 .1 jsx的配置(旧版本) ...
Vue3中TSX和h函数的用法
Vue3中TSX的用法补充:(jsx用法)[https://github.com/vuejs/babel-plugin-jsx] (vue3中渲染函数&JSX)[https://cn.vue ...
Vue3 高级语法（二）—— 自定义指令、Teleport、Vue插件
一.认识自定义指令在Vue的模板语法中我们学习过各种各样的指令:v-show.v-for.v-model等等,除了使用这些指令之外,Vue也允许我们来自定义自己的指令. 注意:在Vue中,代码的复用 ...
python高级语法-高阶函数之map的使用方法
python标准库内置了不少常用的高阶函数. 这里简单介绍一下比较实用的几个的用法. 首先,什么叫高阶函数? 高阶函数,把函数作为参数的函数,这是源于python中函数可以像变量一样赋值等操作,这是其 ...
vue3 - 23.h函数 / 函数式编程
vue3 支持 template 语法,和 JSX / TSX 语法,同样也支持函数式编程函数式编程会用到h函数,h函数接收三个参数,分别是: h(" 1.type 元素类型, ...
vue2.x的h函数(createElement)与vue3中的h函数
1. vue2.x的 h 函数(createElement) 使用方法及介绍:(参考官网提取) h函数第一个是标签名字或者是组件名字,第二个参数是配置项,第三个参数是 innerText ,不会帮你 ...
【强烈推荐】超详解Python-魔法函数（高级语法）
Python-魔法函数(高级语法) 1. 前言 1.1 什么是魔法函数? 1.2 魔法函数有什么作用? 2. 常见的魔法函数 3. 非数学运算 3.1 字符串表示 `__repr__` `__str_ ...

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

一、认识h函数

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

三、h函数的基本使用

render函数实现计数器

setup函数实现计数器

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

五、jsx的babel配置

六、jsx计数器案例

七、jsx组件的使用

Vue3 高级语法（一）—— h函数、jsx相关推荐

最新文章

热门文章

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

一、认识h函数

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

三、h函数的基本使用

render函数实现计数器

setup函数实现计数器

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

五、jsx的babel配置

六、jsx计数器案例

七、jsx组件的使用

Vue3 高级语法（一）—— h函数、jsx相关推荐

最新文章

热门文章

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