vue语法之render函数和jsx的基本使用
h函数的使用
🍤h函数基本介绍
Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用渲染函数，它比模板更接近编译器；
前面我们讲解过VNode和VDOM的概念：
Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM （VDOM）；
事实上，我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode；
那么，如果你想充分的利用JavaScript的编程能力，我们可以自己来编写 createVNode 函数，生成对应的VNode；
我们可以使用 h()函数, 来自己编写createVNode函数：
h() 函数是一个用于创建 vnode 的一个函数；
其实更准确的命名是 createVNode() 函数，但是为了简便在Vue将之简化为 h() 函数；
h()函数 如何使用呢？它接受三个参数：
第一个参数表示创建的元素
第二个参数可选的, 可以传入null, 也可以传入一个要添加的属性的对象
第三个参数是元素的内容, 可以直接传入一个字符串, 表示创建出来元素的内容
如果元素中有其他元素, 那么可以传入一个数组, 再次调用h()函数
注意事项：
如果没有props，那么通常可以将children作为第二个参数传入；
如果会产生歧义，可以将null作为第二个参数传入，将children作为第三个参数传入；
🍤h函数使用流程
h函数可以在两个地方使用：
Options API 的render函数选项中；
setup函数选项中（setup本身需要是一个函数类型，函数再返回h函数创建的VNode）；
例如有如下一个template结构, 我们使用h函数创建出来
<template>
<div class="app">
<h2 class="title">我是标题</h2>
<p>我是内容</p>
</div>
</template>
我们先来看看在Options API中的使用
import { h } from "vue"
export default {
render() {
return h("div", {className: "app"}, [
h("h2", {className: "title"}, "我是标题"),
h("p", null, "我是内容"),
])
}
}
render函数不仅可以传入普通元素, 也可以传入一个组件
import { h } from "vue"
import Home from "./home.vue"
export default {
render() {
return h("div", { className: "app" }, [
// 因为不是在模板中使用, 因此无需注册, 直接使用
h(Home)
])
}
}
我们再来看看在Composition API中的使用
import { h } from "vue"
export default {
setup() {
// setup是一个函数, 让这个函数再返回一个函数
return () => h("div", { class: "app" }, [
h("h2", { class: "title" }, "我是标题"),
h("p", null, "我是内容")
])
}
}
</script>
🍤h函数案例练习
在Options API 中使用h函数完成计数器
import { h } from "vue"
export default {
data() {
return {
conter: 0
}
},
render() {
return h("div", { className: "app" }, [
h("h2", null, `当前计数: ${this.conter}`),
h("button", { onclick: this.increment }, "+"),
h("button", { onclick: this.decrement }, "-")
])
},
methods: {
increment() {
this.conter ++
},
decrement() {
this.conter --
}
},
}
在Composition API 中使用h函数完成计数器
import { h, ref } from "vue"
export default {
setup() {
const conter = ref(0)
const increment = () => {
conter.value ++
}
const decrement = () => {
conter.value --
}
// setup是一个函数, 让这个函数再返回一个h函数
return () => h("div", { class: "app" }, [
h("h2", { class: "title" }, `当前计数: ${conter.value}`),
h("button", { onclick: increment }, "+"),
h("button", { onclick: decrement }, "-")
])
}
}
如果是在<script setup>标签中使用h函数, 需要如下方式(会变得很繁琐)
<template>
<!-- 将render函数变量写在temolate标签中 -->
<render></render>
</template>
<script setup>
import { h, ref } from "vue"
const conter = ref(0)
const increment = () => {
conter.value ++
}
const decrement = () => {
conter.value --
}
// 将这个render函数保存到一个变量中
const render = () => h("div", { class: "app" }, [
h("h2", { class: "title" }, `当前计数: ${conter.value}`),
h("button", { onclick: increment }, "+"),
h("button", { onclick: decrement }, "-")
])
</script>
我们发现, render函数虽然可以让我们使用JavaScript完全提升编程能力, 但是render函数使用起来比起之前是会变得更加繁琐, 因此我们开发中基本不使用rander函数
如果我们确实想要使用完全JavaScript编程, 那么在开发中, 我们更为常见的是使用接下来讲到的jsx
jsx的体验
在Vue中是支持jsx的, 凡是我们是比较少在Vue中使用jsx的, jsx在react中使用的更加广泛, 因此在这里我简单介绍一下jsx的基本使用, 后续在react中, 会给大家详细介绍jsx的使用方式, 以及各种细节
🍤jsx的babel配置
如果我们希望在项目中使用jsx，那么我们需要添加对jsx的支持：
jsx我们通常会通过Babel来进行转换（React编写的jsx就是通过babel转换的）；
对于Vue来说，我们只需要在Babel中配置对应的插件即可；
webpack环境下安装Babel支持Vue的jsx插件：npm install @vue/babel - plugin -j sx -D
在babel.config.js配置文件中配置插件
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
"@vue/babel-plugin-jsx"
]
}
如果是Vite环境下，需要安装插件：npm install @vitejs/plugin-vue-jsx -D
在vite.config.js配置文件中配置插件
import jsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
jsx()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
}
配置完成后我们就可以直接使用jsx了, 演示代码如下
import jsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
jsx()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
}
🍤jsx计数器案例
通过计数器的案例, 我们来体验一下jsx的使用吧
Options API 的使用
<!-- 告知script标签使用jsx -->
<script lang="jsx">
export default {
data() {
return {
counter: 0
}
},
render() {
// jsx中使用大括号引用js中的语法
return (
<div class="app">
<h2>当前计数: { this.counter }</h2>
<button onclick={ this.increment }>+</button>
<button onclick={ this.decrement }>-</button>
</div>
)
},
methods: {
increment() {
this.counter ++
},
decrement() {
this.counter --
}
},
}
</script>
Composition 中的使用
<!-- 告知script标签使用jsx -->
<script lang="jsx">
import { ref } from "vue"
export default {
setup() {
const counter = ref(0)
const increment = () => {
counter.value ++
}
const decrement = () => {
counter.value --
}
return () => (
<div class="app">
<h2>当前计数: { counter.value }</h2>
<button onclick={ increment }>+</button>
<button onclick={ decrement }>-</button>
</div>
)
}
}
</script>到此这篇关于vue语法之render函数和jsx的基本使用的文章就介绍到这了,更多相关vue render函数和jsx使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了Vue3中watch监听器及源码学习,Watch侦听器在Vue3中特性进行了一些改变和优化,下面来详解的介绍一下基本使用,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了Vertx基于EventBus发送接受自定义对象,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要为大家介绍了vue3数组或对象赋值不更新解决方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
下面小编就为大家分享一篇vue页面跳转后返回原页面初始位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
vue3+ts+vite+electron搭建桌面应用的过程
这篇文章主要介绍了vue3+ts+vite+electron搭建桌面应用的过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue-router 控制路由权限的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下2022-12-12
ue3上线已经很久了,许多小伙伴应该都已经使用过vue3了,下面这篇文章主要给大家介绍了关于Vue3.2单文件组件setup的语法糖与新特性总结的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了Vue如何利用Echart实现利用率表盘的效果，文中的示例代码讲解详细，具有一定的借鉴价值，需要的可以参考一下2023-04-04
vue router动态路由下让每个子路由都是独立组件的解决方案
这篇文章主要介绍了vue router动态路由下让每个子路由都是独立组件的解决方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
最新评论