一、認識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函數實現計數器

<script> 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')])} } </script><style scoped> </style>

setup函數實現計數器

<script> 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')])}} } </script><style scoped> </style>

四、函數組件和插槽的使用

Home.vue:

<script> 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}`)})} } </script><style scoped> </style>

HelloWorld.vue:

<script> 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插槽的默認值')])} } </script><style scoped></style>

五、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計數器案例

<script> 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 (<div><div>當前計數: {this.counter}</div><button onClick={this.increment}>+1</button><button onClick={this.decrement}>-1</button></div>)} } </script><style scoped> </style>

七、jsx組件的使用

總結

以上是生活随笔為你收集整理的Vue3 高级语法（一）—— h函数、jsx的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。