Vue高级语法(三) | render函数和jsx的基本使用

小灰灰 2024-04-27 15:55 132阅读 0赞

文章目录

    • h函数的使用
      • ?h函数基本介绍
      • ?h函数使用流程
      • ?h函数案例练习
    • jsx的体验
      • ?jsx的babel配置
      • ?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函数创建出来

  1. <template>
  2. <div class="app">
  3. <h2 class="title">我是标题</h2>
  4. <p>我是内容</p>
  5. </div>
  6. </template>

我们先来看看在Options API中的使用

  1. import {
  2. h } from "vue"
  3. export default {
  4. render() {
  5. return h("div", {
  6. className: "app"}, [
  7. h("h2", {
  8. className: "title"}, "我是标题"),
  9. h("p", null, "我是内容"),
  10. ])
  11. }
  12. }
  • render函数不仅可以传入普通元素, 也可以传入一个组件

    import {

    1. h } from "vue"

    import Home from “./home.vue”

    export default {

    render() {

    1. return h("div", {
    2. className: "app" }, [
    3. // 因为不是在模板中使用, 因此无需注册, 直接使用
    4. h(Home)
    5. ])

    }
    }

我们再来看看在Composition API中的使用

  1. import {
  2. h } from "vue"
  3. export default {
  4. setup() {
  5. // setup是一个函数, 让这个函数再返回一个函数
  6. return () => h("div", {
  7. class: "app" }, [
  8. h("h2", {
  9. class: "title" }, "我是标题"),
  10. h("p", null, "我是内容")
  11. ])
  12. }
  13. }
  14. </script>

?h函数案例练习

在Options API 中使用h函数完成计数器

  1. import {
  2. h } from "vue"
  3. export default {
  4. data() {
  5. return {
  6. conter: 0
  7. }
  8. },
  9. render() {
  10. return h("div", {
  11. className: "app" }, [
  12. h("h2", null, `当前计数: ${
  13. this.conter}`),
  14. h("button", {
  15. onclick: this.increment }, "+"),
  16. h("button", {
  17. onclick: this.decrement }, "-")
  18. ])
  19. },
  20. methods: {
  21. increment() {
  22. this.conter ++
  23. },
  24. decrement() {
  25. this.conter --
  26. }
  27. },
  28. }

在Composition API 中使用h函数完成计数器

  1. import {
  2. h, ref } from "vue"
  3. export default {
  4. setup() {
  5. const conter = ref(0)
  6. const increment = () => {
  7. conter.value ++
  8. }
  9. const decrement = () => {
  10. conter.value --
  11. }
  12. // setup是一个函数, 让这个函数再返回一个h函数
  13. return () => h("div", {
  14. class: "app" }, [
  15. h("h2", {
  16. class: "title" }, `当前计数: ${
  17. conter.value}`),
  18. h("button", {
  19. onclick: increment }, "+"),
  20. h("button", {
  21. onclick: decrement }, "-")
  22. ])
  23. }
  24. }
  • 如果是在

我们发现, 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配置文件中配置插件

  1. module.exports = {
  2. presets: [
  3. '@vue/cli-plugin-babel/preset'
  4. ],
  5. plugins: [
  6. "@vue/babel-plugin-jsx"
  7. ]
  8. }

如果是Vite环境下,需要安装插件npm install @vitejs/plugin-vue-jsx -D

在vite.config.js配置文件中配置插件

  1. import jsx from '@vitejs/plugin-vue-jsx'
  2. // https://vitejs.dev/config/
  3. export default defineConfig({
  4. plugins: [
  5. vue(),
  6. jsx()
  7. ],
  8. resolve: {
  9. alias: {
  10. '@': fileURLToPath(new URL('./src', import.meta.url))
  11. }
  12. }
  13. }

配置完成后我们就可以直接使用jsx了, 演示代码如下

  1. import jsx from '@vitejs/plugin-vue-jsx'
  2. // https://vitejs.dev/config/
  3. export default defineConfig({
  4. plugins: [
  5. vue(),
  6. jsx()
  7. ],
  8. resolve: {
  9. alias: {
  10. '@': fileURLToPath(new URL('./src', import.meta.url))
  11. }
  12. }
  13. }

?jsx计数器案例

通过计数器的案例, 我们来体验一下jsx的使用吧

Options API 的使用

  1. <!-- 告知script标签使用jsx -->
  2. <script lang="jsx">
  3. export default {
  4. data() {
  5. return {
  6. counter: 0
  7. }
  8. },
  9. render() {
  10. // jsx中使用大括号引用js中的语法
  11. return (
  12. <div class="app">
  13. <h2>当前计数: {
  14. this.counter }</h2>
  15. <button onclick={
  16. this.increment }>+</button>
  17. <button onclick={
  18. this.decrement }>-</button>
  19. </div>
  20. )
  21. },
  22. methods: {
  23. increment() {
  24. this.counter ++
  25. },
  26. decrement() {
  27. this.counter --
  28. }
  29. },
  30. }
  31. </script>

Composition 中的使用

  1. <!-- 告知script标签使用jsx -->
  2. <script lang="jsx">
  3. import {
  4. ref } from "vue"
  5. export default {
  6. setup() {
  7. const counter = ref(0)
  8. const increment = () => {
  9. counter.value ++
  10. }
  11. const decrement = () => {
  12. counter.value --
  13. }
  14. return () => (
  15. <div class="app">
  16. <h2>当前计数: {
  17. counter.value }</h2>
  18. <button onclick={
  19. increment }>+</button>
  20. <button onclick={
  21. decrement }>-</button>
  22. </div>
  23. )
  24. }
  25. }
  26. </script>

发表评论

表情:
评论列表 (有 0 条评论,132人围观)

还没有评论,来说两句吧...

相关阅读

    相关 jsx 基本语法

    JSX 是一种 JavaScript 的语法扩展,运用于 React 架构中,其格式比较像是模版语言,但事实上完全是在 JavaScript 内部实现的。元素是构成 React

    相关 Vue使用 JSX 语法

    Vue 中构建虚拟DOM可以直接使用渲染函数构建虚拟Dom,正常情况下用render函数的参数createElement方法构建虚拟Dom的语法比较繁琐,更方便的是用更接近于模

    相关 Vuerender函数

    回忆Vue的一些基本概念 今天我们学习的目的是了解和学习Vue的`render`函数。如果想要更好的学习Vue的`render`函数相关的知识,我们有必要重温一下Vue中