vue語(yǔ)法之render函數(shù)和jsx的基本使用

更新時(shí)間：2022年08月11日 12:02:36 作者：林有酒

這篇文章主要介紹了vue語(yǔ)法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡(jiǎn)單介紹一下jsx的基本使用，需要的朋友可以參考下

h函數(shù)的使用

??h函數(shù)基本介紹

Vue推薦在絕大數(shù)情況下使用模板來(lái)創(chuàng)建你的HTML，然后一些特殊的場(chǎng)景，你真的需要JavaScript的完全編程的能力，這個(gè)時(shí)候你可以使用渲染函數(shù)，它比模板更接近編譯器；

前面我們講解過(guò)VNode和VDOM的概念：

Vue在生成真實(shí)的DOM之前，會(huì)將我們的節(jié)點(diǎn)轉(zhuǎn)換成VNode，而VNode組合在一起形成一顆樹(shù)結(jié)構(gòu)，就是虛擬DOM （VDOM）；

事實(shí)上，我們之前編寫的 template 中的HTML 最終也是使用渲染函數(shù)生成對(duì)應(yīng)的VNode；

那么，如果你想充分的利用JavaScript的編程能力，我們可以自己來(lái)編寫 createVNode 函數(shù)，生成對(duì)應(yīng)的VNode；

我們可以使用 h()函數(shù), 來(lái)自己編寫createVNode函數(shù)：

h() 函數(shù)是一個(gè)用于創(chuàng)建 vnode 的一個(gè)函數(shù)；

其實(shí)更準(zhǔn)確的命名是 createVNode() 函數(shù)，但是為了簡(jiǎn)便在Vue將之簡(jiǎn)化為 h() 函數(shù)；

h()函數(shù) 如何使用呢？它接受三個(gè)參數(shù)：

第一個(gè)參數(shù)表示創(chuàng)建的元素

第二個(gè)參數(shù)可選的, 可以傳入null, 也可以傳入一個(gè)要添加的屬性的對(duì)象

第三個(gè)參數(shù)是元素的內(nèi)容, 可以直接傳入一個(gè)字符串, 表示創(chuàng)建出來(lái)元素的內(nèi)容

如果元素中有其他元素, 那么可以傳入一個(gè)數(shù)組, 再次調(diào)用h()函數(shù)

注意事項(xiàng)：

如果沒(méi)有props，那么通常可以將children作為第二個(gè)參數(shù)傳入；

如果會(huì)產(chǎn)生歧義，可以將null作為第二個(gè)參數(shù)傳入，將children作為第三個(gè)參數(shù)傳入；

??h函數(shù)使用流程

h函數(shù)可以在兩個(gè)地方使用：

Options API 的render函數(shù)選項(xiàng)中；

setup函數(shù)選項(xiàng)中（setup本身需要是一個(gè)函數(shù)類型，函數(shù)再返回h函數(shù)創(chuàng)建的VNode）；

例如有如下一個(gè)template結(jié)構(gòu), 我們使用h函數(shù)創(chuàng)建出來(lái)

<template>
  <div class="app">
    <h2 class="title">我是標(biāo)題</h2>
		 <p>我是內(nèi)容</p>
  </div>
</template>

我們先來(lái)看看在Options API中的使用

import { h } from "vue"

export default {
  render() {
    return h("div", {className: "app"}, [
      h("h2", {className: "title"}, "我是標(biāo)題"),
      h("p", null, "我是內(nèi)容"),
    ])
  }
}

render函數(shù)不僅可以傳入普通元素, 也可以傳入一個(gè)組件

import { h } from "vue"
import Home from "./home.vue"

export default {
  render() {
    return h("div", { className: "app" }, [
      // 因?yàn)椴皇窃谀０逯惺褂? 因此無(wú)需注冊(cè), 直接使用
      h(Home)
    ])
  }
}

我們?cè)賮?lái)看看在Composition API中的使用

import { h } from "vue"

export default {
  setup() {
    // setup是一個(gè)函數(shù), 讓這個(gè)函數(shù)再返回一個(gè)函數(shù)
    return () => h("div", { class: "app" }, [
      h("h2", { class: "title" }, "我是標(biāo)題"),
      h("p", null, "我是內(nèi)容")
    ])
  }
}
</script>

??h函數(shù)案例練習(xí)

在Options API 中使用h函數(shù)完成計(jì)數(shù)器

import { h } from "vue"

export default {
  data() {
    return {
      conter: 0
    }
  },
  render() {
    return h("div", { className: "app" }, [
      h("h2", null, `當(dāng)前計(jì)數(shù): ${this.conter}`),
      h("button", { onclick: this.increment }, "+"),
      h("button", { onclick: this.decrement }, "-")
    ])
  },
  methods: {
    increment() {
      this.conter ++
    },
    decrement() {
      this.conter --
    }
  },
}

在Composition API 中使用h函數(shù)完成計(jì)數(shù)器

import { h, ref } from "vue"

export default {
  setup() {
    const conter = ref(0)

    const increment = () => {
      conter.value ++
    }

    const decrement = () => {
      conter.value --
    }

    // setup是一個(gè)函數(shù), 讓這個(gè)函數(shù)再返回一個(gè)h函數(shù)
    return () => h("div", { class: "app" }, [
      h("h2", { class: "title" }, `當(dāng)前計(jì)數(shù): ${conter.value}`),
      h("button", { onclick: increment }, "+"),
      h("button", { onclick: decrement }, "-")
    ])
  }
}

如果是在<script setup>標(biāo)簽中使用h函數(shù), 需要如下方式(會(huì)變得很繁瑣)

<template>
  <!-- 將render函數(shù)變量寫在temolate標(biāo)簽中 -->
  <render></render>
</template>

<script setup>
import { h, ref } from "vue"

const conter = ref(0)

    const increment = () => {
      conter.value ++
    }

    const decrement = () => {
      conter.value --
    }

    // 將這個(gè)render函數(shù)保存到一個(gè)變量中
    const render = () => h("div", { class: "app" }, [
      h("h2", { class: "title" }, `當(dāng)前計(jì)數(shù): ${conter.value}`),
      h("button", { onclick: increment }, "+"),
      h("button", { onclick: decrement }, "-")
    ])
</script>

我們發(fā)現(xiàn), render函數(shù)雖然可以讓我們使用JavaScript完全提升編程能力, 但是render函數(shù)使用起來(lái)比起之前是會(huì)變得更加繁瑣, 因此我們開(kāi)發(fā)中基本不使用rander函數(shù)

如果我們確實(shí)想要使用完全JavaScript編程, 那么在開(kāi)發(fā)中, 我們更為常見(jiàn)的是使用接下來(lái)講到的jsx

jsx的體驗(yàn)

在Vue中是支持jsx的, 凡是我們是比較少在Vue中使用jsx的, jsx在react中使用的更加廣泛, 因此在這里我簡(jiǎn)單介紹一下jsx的基本使用, 后續(xù)在react中, 會(huì)給大家詳細(xì)介紹jsx的使用方式, 以及各種細(xì)節(jié)

??jsx的babel配置

如果我們希望在項(xiàng)目中使用jsx，那么我們需要添加對(duì)jsx的支持：

jsx我們通常會(huì)通過(guò)Babel來(lái)進(jìn)行轉(zhuǎn)換（React編寫的jsx就是通過(guò)babel轉(zhuǎn)換的）；

對(duì)于Vue來(lái)說(shuō)，我們只需要在Babel中配置對(duì)應(yīng)的插件即可；

webpack環(huán)境下安裝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環(huán)境下，需要安裝插件：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計(jì)數(shù)器案例

通過(guò)計(jì)數(shù)器的案例, 我們來(lái)體驗(yàn)一下jsx的使用吧

Options API 的使用

<!-- 告知script標(biāo)簽使用jsx -->
<script lang="jsx">
export default {
  data() {
    return {
      counter: 0
    }
  },
  render() {
    // jsx中使用大括號(hào)引用js中的語(yǔ)法
    return (
      <div class="app">
        <h2>當(dāng)前計(jì)數(shù): { this.counter }</h2>
        <button onclick={ this.increment }>+</button>
        <button onclick={ this.decrement }>-</button>
      </div>
    )
  },
  methods: {
    increment() {
      this.counter ++
    },

    decrement() {
      this.counter --
    }
  },
}
</script>

Composition 中的使用

<!-- 告知script標(biāo)簽使用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>當(dāng)前計(jì)數(shù): { counter.value }</h2>
        <button onclick={ increment }>+</button>
        <button onclick={ decrement }>-</button>
      </div>
    )
  }
}
</script>

到此這篇關(guān)于vue語(yǔ)法之render函數(shù)和jsx的基本使用的文章就介紹到這了,更多相關(guān)vue render函數(shù)和jsx使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: