Vue3 VNode h 函数详解
VNode 概念与理解
Vue3中的VNode（Virtual DOM Node）是一种轻量级的JavaScript对象，用于描述DOM节点的结构和属性。
Vue3使用VNode来管理Virtual DOM，使得Vue3可以将组件的状态变化快速地映射到页面上，从而提高页面性能。
VNode 用法
VNode的用法可以分为两个方面，一个是手动创建VNode，另一个是由Vue3自动创建VNode。
手动创建
手动创建VNode需要使用Vue3提供的h函数，
它接受三个参数：
- 标签名 - 属性对象 - 子元素
例如，创建一个div元素的VNode可以写成：
import { h } from 'vue';
const vnode = h('div', { class: 'my-class' }, 'Hello World');
上面的代码中，我们使用h函数创建了一个div元素的VNode，设置了class属性为'my-class'，并将'Hello World'作为子元素。这个VNode可以直接传递给Vue3的render函数进行渲染。
vue3自动创建
Vue3也可以
自动创建VNode，这是通过解析模板来实现的。例如：
<template>
<div class="my-class">Hello World</div>
</template>
Vue3会将这个模板解析成VNode，并将其渲染到页面上。
白话理解
说白了，
VNode的具体含义可以理解为是一个虚拟的DOM节点，它描述了一个DOM节点的结构和属性，但并不是真正的DOM节点。VNode可以被Vue3用来更新页面上的真实DOM节点，从而实现高效的页面更新。
VNode 【props、attrs、class、style】
VNode中的props、attrs、class和style是VNode的属性，
它们分别用于设置DOM节点的属性、HTML属性、类名和样式。具体含义如下：
-
props：用于设置
DOM节点的属性，例如checked、value等。 -
attrs：用于设置
HTML属性，例如title、data-xxx等。 -
class：用于设置DOM节点的
类名，可以是一个字符串或一个对象。 -
style：用于设置DOM节点的
样式，可以是一个字符串或一个对象。
例如：
props
props属性是用于设置DOM节点的原生属性。比如checked、value等。这些属性在DOM节点上是直接映射的，例如:
import { h } from 'vue'
const vnode = h('input', { type: 'text', value: 'Hello World' })
上面代码中，使用了h函数创建了一个input元素的VNode，并设置了type和value属性。
attrs
import { h } from 'vue'
const vnode = h('div', { id: 'my-div', title: 'Hello World' })
注意点: 在处理vnode时，会自动对props和attrs进行区分，对于一些特定的属性，比如class和style，vue3会将它们分别处理微class和style属性，而不是props或attrs属性。
class
一个字符串
const vnode = h('div', { class: 'my-class' }, 'Hello World');
一个对象
const vnode = h('div', { class: { 'my-class': true, 'your-class': false } }, 'Hello World');
style
一个字符串
const vnode = h('div', { style: 'color: red;' }, 'Hello World');
一个对象
const vnode = h('div', { style: { color: 'red', fontSize: '16px' } }, 'Hello World');
开发中用到的地方
一些UI框架中
比如 ant design， 或者element
代码:
this.$notify({
title: '报错提示',
message: h('div', { style: 'color: red' }, '操作失误，请重试！')
})
类似上面提示报错或者警告的情况。
还有一些循环li元素的情况
const that = this
this.$notification.error({
message: '提示',
description: h => {
return h('p', null, [
h(
'div',
{
class: 'test'
},
null
),
h(
'ul',
{
class: 'test-ul'
},
that.liFn(h, res)
)
])
},
style: {
width: '500px',
marginLeft: `${335 - 450}px`
},
duration: 0
})
// liFn循环
liFn (h, res) {
// return [
// h('li', {}, '文本'),
// h('li', {}, '文本')
// ]
// 外层
if (this.type === 'outside') {
const arr = []
for (const key in res.msg) {
arr.push(h('li', {
class: 'father-li'
}, key))
res.msg[key].map(v => {
arr.push(h('li', {}, v))
})
}
return arr
}
const arr = []
if (res.msg.length) {
res.msg.map(v => {
arr.push(h('li', {}, v))
})
}
return arr
}
总结
以上就是Vue3中VNode的概念和用法，以及VNode中props、attrs、class和style的详解。
在Vue3中，VNode是一个非常重要的概念。
理解VNode的使用方法可以帮助我们更好地开发Vue3应用程序。
希望能有所帮助。
最好的学习是贡献和输出。
本文正在参加「金石计划」