Vue3 高级语法（一）

您所在的位置：网站首页 › vue组件slot渲染html › Vue3 高级语法（一）

Vue3 高级语法（一）

2023-09-01 10:58| 来源: 网络整理| 查看: 265

一、认识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函数实现计数器

在这里插入图片描述

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') ]) } } setup函数实现计数器

在这里插入图片描述

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') ]) } } } 四、函数组件和插槽的使用

在这里插入图片描述

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

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}`) }) } }

HelloWorld.vue:

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插槽的默认值') ]) } } 五、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计数器案例

在这里插入图片描述

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 ( 当前计数: {this.counter} this.decrement}>-1 ) } } 七、jsx组件的使用

在这里插入图片描述

【本文地址】

Vue3 高级语法（一）

Vue3 高级语法（一）

今日新闻

推荐新闻