Vue?h函數(shù)的使用詳解
更新時間：2021年12月31日 15:39:30 作者：前端怎么那么菜
本文主要介紹了Vue?h函數(shù)的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一、認(rèn)識
文檔：https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91
? h() 到底會返回什么呢？其實不是一個實際的 DOM 元素。它更準(zhǔn)確的名字可能是 createNodeDescription，因為它所包含的信息會告訴 Vue 頁面上需要渲染什么樣的節(jié)點，包括及其子節(jié)點的描述信息。我們把這樣的節(jié)點描述為“虛擬節(jié)點 (virtual node)”，也常簡寫它為 VNode 。“虛擬 DOM”是我們對由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。
二、使用
文檔：https://v3.cn.vuejs.org/guide/render-function.html#h-%E5%8F%82%E6%95%B0
1、h() 參數(shù)
h() 函數(shù)是一個用于創(chuàng)建 VNode 的實用程序。也許可以更準(zhǔn)確地將其命名為 createVNode()，但由于頻繁使用和簡潔，它被稱為 h() 。它接受三個參數(shù)：
// @returns {VNode}
h(
// {String | Object | Function} tag
// 一個 HTML 標(biāo)簽名、一個組件、一個異步組件、或
// 一個函數(shù)式組件。
//
// 必需的。
'div',
// {Object} props
// 與 attribute、prop 和事件相對應(yīng)的對象。
// 這會在模板中用到。
//
// 可選的(在開發(fā)時。建議傳，實在沒有傳的時候，傳入 null)
{},
// {String | Array | Object} children
// 子 VNodes, 使用 `h()` 構(gòu)建,
// 或使用字符串獲取 "文本 VNode" 或者
// 有插槽的對象。
//
// 可選的。
[
'Some text comes first.',
h('h1', 'A headline'),
h(MyComponent, {
someProp: 'foobar'
})
]
)2、簡單的使用
3、實現(xiàn)一個計數(shù)器案例
<script>
/* 設(shè)置樣式需要在這引入，如果使用style標(biāo)簽，則不能寫scoped，不利于設(shè)置局部樣式，所以不建議 */
import "./style.css"
import { h, ref } from "vue";
export default {
// data 的寫法
// data() {
// return {
// counter: 0
// }
// },
setup() {
const counter = ref(0)
return { counter }
},
/**
* 使用setup的時候，下面也可以用this，引入render有綁定this，所以下面取值，要用this
*/
render() {
return h("div", null, [
h("h1", null, `當(dāng)前計數(shù)：${this.counter}`),
h("button", { onClick: () => this.counter++, class: "button" }, "加 1"),
h("button", { onClick: () => this.counter--, class: "button" }, "減 1")
])
}
}
</script>修改成純setup的寫法：
<script>
/* 設(shè)置樣式需要在這引入，如果使用style標(biāo)簽，則不能寫scoped，不利于設(shè)置局部樣式，所以不建議 */
import "./style.css"
import { h, ref } from "vue";
export default {
// data 的寫法
// data() {
// return {
// counter: 0
// }
// },
setup() {
const counter = ref(0)
return () => {
return h("div", null, [
h("h1", null, `當(dāng)前計數(shù)：${counter.value}`),
h("button", { onClick: () => counter.value++, class: "button" }, "加 1"),
h("button", { onClick: () => counter.value--, class: "button" }, "減 1")
])
}
}
}
</script>4、函數(shù)組件和插槽的使用
1）父組件
<script>
import { h, ref } from "vue";
import Test from "./components/Test.vue"
export default {
setup() {
return {}
},
render() {
return h(Test, null, {
// default 對應(yīng)的是一個函數(shù)，default是默認(rèn)插槽
default: props => h("span", null, "父傳入到組件中的內(nèi)容：" + props.name)
})
}
}
</script>2）子組件
<script>
import { h } from "vue";
export default {
/**
* 接收夫傳入的內(nèi)容
*/
render() {
return h("div", null, [
h("div", null, "我是子組件"),
/**
* 在這判斷別人是否傳入
* 也可以寫 null，啥也不展示
* 也可以在傳入一個參數(shù)，使用的是 函數(shù)傳參
*/
this.$slots.default ? this.$slots.default({ name: "哈哈哈" }) : h("div", null, "我是子組件的默認(rèn)值")
])
}
}
</script>注：在項目中，如果你像上面一樣寫代碼，就太苦逼了，所以這個時候就要用 JSX。
三、jsx的使用
1、jsx的認(rèn)識
jsx我們通常會通過Babel來進(jìn)行轉(zhuǎn)換（React編寫的jsx就是通過babel轉(zhuǎn)換的）；
對于Vue來說，我們只需要在Babel中配置對應(yīng)的插件即可；
文檔：https://v3.cn.vuejs.org/guide/render-function.html#jsx
2、下載Babel插件支持vue（現(xiàn)在貌似腳手架直接支持）
npm install @vue/babel-plugin-jsx -D
3、配置babel
1）在根目錄下創(chuàng)建 .babel.config.js
2）在.babel.config.js 里面加入，如下代碼
module.exports = {
presets: [
"@/vue/cli-plugin-babel/preset"
],
plugins: [
"@vue/babel-plugin-jsx"
]
}4、簡單的使用
<script>
import { ref } from 'vue'
export default {
setup() {
let counter = ref(0)
return { counter }
},
render() {
return (
<div>
<div>JSX的使用</div>
<h2>當(dāng)前數(shù)字：{this.counter}</h2>
</div>
)
}
}
</script>5、計數(shù)器案例
<script>
import { ref } from '@vue/reactivity'
export default {
setup() {
let counter = ref(0)
function add() {
counter.value++
}
function decrement() {
counter.value--
}
return { counter, add, decrement }
},
render() {
return (
<div>
<div>JSX的使用</div>
<h2>當(dāng)前數(shù)字：{this.counter}</h2>
<button onClick={this.add}>加 1</button>
<button onClick={this.decrement} >減 1</button>
</div >
)
}
}
</script>6、組件和插槽的使用
1）父組件
<script>
import { ref } from '@vue/reactivity'
import Test from "./components/Test.vue"
export default {
setup() {
let counter = ref(0)
function add() {
counter.value++
}
function decrement() {
counter.value--
}
return { counter, add, decrement }
},
render() {
return (
<div>
<div>JSX的使用</div>
{/* 如果這塊使用setup里面的變量、方法 要加this */}
<h2>當(dāng)前數(shù)字：{this.counter}</h2>
<button onClick={this.add}>加 1</button>
<button onClick={this.decrement} >減 1</button>
<hr />
<Test>
{/* 這個里面寫入傳入的內(nèi)容,也就是傳入一個插槽 */}
{{ default: props => <p>我是父傳入子的</p> }}
</Test>
</div >
)
}
}
</script>2）子組件
<script>
export default {
/**
* 接收夫傳入的內(nèi)容
*/
render() {
return (
<div>
<p>我是組件</p>
{/* 這塊也有可能沒穿，你要顯示一個默認(rèn)值，這個時候，你就要用三元運算符 */}
{this.$slots.default()}
</div>
)
}
}
</script>注：如果你要h函數(shù)來寫組件，請仔細(xì)查看文檔，以上講解，只是入門級。
到此這篇關(guān)于Vue h函數(shù)的使用詳解的文章就介紹到這了,更多相關(guān)Vue h函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-cli3腳手架安裝方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
Axios是一個基于Promise用于瀏覽器和nodejs的HTTP客戶端,本質(zhì)上也是對原生XHR的封裝,只不過它是Promise的實現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue中使用axios最詳細(xì)教程的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue3+vite assets動態(tài)引入圖片的三種方法及解決打包后圖片路徑錯誤不顯示的問題
這篇文章主要介紹了vue3+vite assets動態(tài)引入圖片的幾種方式，解決打包后圖片路徑錯誤不顯示的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue中@click綁定多個事件問題(教你避坑),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了在vue-cli3中使用axios獲取本地json操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue.set() (this.$set)的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
一篇文章帶你使用Typescript封裝一個Vue組件(簡單易懂)
這篇文章主要介紹了使用Typescript封裝一個Vue組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue使用keep-alive進(jìn)行組件緩存方法詳解(組件不緩存問題解決)
keep-alive包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們,下面這篇文章主要給大家介紹了關(guān)于vue使用keep-alive進(jìn)行組件緩存方法(組件不緩存問題解決)的相關(guān)資料,需要的朋友可以參考下2022-09-09
本文主要介紹了vue關(guān)閉瀏覽器退出登錄，一般都是根據(jù)根據(jù)beforeunload和unload這兩個事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實現(xiàn)，感興趣的可以了解一下2021-12-12
Vue3中關(guān)于getCurrentInstance的大坑及解決
這篇文章主要介紹了Vue3中關(guān)于getCurrentInstance的大坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04