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

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

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

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

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

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

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

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

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

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

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

注意事項：

如果沒有props，那么通?？梢詫hildren作為第二個參數(shù)傳入；

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

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

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

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

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

例如有如下一個template結構, 我們使用h函數(shù)創(chuàng)建出來

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

我們先來看看在Options API中的使用

import { h } from "vue"

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

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

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是一個函數(shù), 讓這個函數(shù)再返回一個函數(shù)
    return () => h("div", { class: "app" }, [
      h("h2", { class: "title" }, "我是標題"),
      h("p", null, "我是內(nèi)容")
    ])
  }
}
</script>

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

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

import { h } from "vue"

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

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

import { h, ref } from "vue"

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

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

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

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

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

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

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

const conter = ref(0)

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

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

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

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

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

jsx的體驗

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

??jsx的babel配置

如果我們希望在項目中使用jsx，那么我們需要添加對jsx的支持：

jsx我們通常會通過Babel來進行轉(zhuǎn)換（React編寫的jsx就是通過babel轉(zhuǎn)換的）；

對于Vue來說，我們只需要在Babel中配置對應的插件即可；

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計數(shù)器案例

通過計數(shù)器的案例, 我們來體驗一下jsx的使用吧

Options API 的使用

<!-- 告知script標簽使用jsx -->
<script lang="jsx">
export default {
  data() {
    return {
      counter: 0
    }
  },
  render() {
    // jsx中使用大括號引用js中的語法
    return (
      <div class="app">
        <h2>當前計數(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標簽使用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>當前計數(shù): { counter.value }</h2>
        <button onclick={ increment }>+</button>
        <button onclick={ decrement }>-</button>
      </div>
    )
  }
}
</script>

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

您可能感興趣的文章: