一、Vue3 h函数通信
Vue3 h函数是Vue3提供的一个函数式编程方式，可以使用它来创建Vue组件的虚拟节点(vnode)，还可以在组件中更新数据。与Vue2的createElement函数相比，Vue3 h函数是一个更轻量，更易用的函数。h函数通常与Vue3的渲染函数(render)一起使用，在函数式编程中具有非常重要的作用。
h函数是一种虚拟节点的创建方式，在Vue3中，组件之间通信可以使用props和$emit方法，其他组件的数据可以通过props传递进来，当前组件的数据可以通过$emit方法向外发送。虚拟节点和h函数允许我们在组件之间直接通信，而不是通过props和$emit方法进行传递，提高了组件之间通信的效率。
我们来看一个简单的例子：
const App = {
data() {
return {
count: 0
}
},
render() {
return h('div', {}, [
h('h1', {}, '当前的计数器值是：' + this.count),
h('button', {
onClick: () => {
this.count++
}
}, '加一')
])
}
}
createApp(App).mount('#app')
在上述代码中，我们通过Vue3 h函数创建了一个div元素，h函数的第一个参数是元素名称，第二个参数是一个对象，其中可以传递元素的属性，第三个参数是数组，其中可以传递虚拟节点。在数组中，我们传递了一个h函数创建的h1元素和一个button元素，button元素上可以通过onClick方法进行绑定事件，用来触发count值的自增。
二、Vue3 h函数和createVNode
可以使用createVNode函数来创建单个的虚拟节点，也可以使用h函数创建一个虚拟节点的树形结构。createVNode一个的参数可以是一个标签字符串，或是一个组件对象。它的第二个参数是一个对象，可以传递元素的属性，第三个参数是一个数组，用于传递子元素。createVNode和h函数的最大区别在于createVNode使用对象的方式来创建虚拟节点，而h函数使用函数的方式来进行创建。
接下来，我们通过一个展示列表的例子，来比对createVNode函数和h函数的不同：
const App = {
data() {
return {
list: [
{
name: '张三',
age: 20
},
{
name: '李四',
age: 22
},
{
name: '王五',
age: 24
}
]
}
},
render() {
const listItems = this.list.map(item => {
return createVNode('li', {
key: item.name
}, [
createVNode('span', {}, item.name),
createVNode('span', {}, item.age)
])
})
return createVNode('ul', {}, listItems)
}
}
createApp(App).mount('#app')
上述代码中，我们首先通过createVNode函数创建li元素，并传递了元素的属性和子元素，然后通过map函数遍历了name和age，得到一个li元素的数组，最后再通过createVNode函数创建ul元素，并传递了子元素为li数组。createVNode函数的使用方式和createElement函数类似，但是我们可以看到使用方式更为简洁。
接下来，我们使用h函数来创建同样的列表：
const App = {
data() {
return {
list: [
{
name: '张三',
age: 20
},
{
name: '李四',
age: 22
},
{
name: '王五',
age: 24
}
]
}
},
render() {
const listItems = this.list.map(item => {
return h('li', {
key: item.name
}, [
h('span', {}, item.name),
h('span', {}, item.age)
])
})
return h('ul', {}, listItems)
}
}
createApp(App).mount('#app')
通过对比可以看到，createVNode函数和h函数都可以用来创建虚拟节点，但是它们的使用方式是不同的。createVNode函数的使用方式更加简洁明了，h函数的使用方式则更加函数式，区别在于我们对于节点的描述方式有所不同。我们需要根据实际情况来选择使用哪种方式。
三、Vue3 h函数源码
Vue3的源码是通过TypeScript编写的，h函数的定义方式如下：
import { createVNode } from './vnode'
export function h(type, propsOrChildren, children) {
const l = arguments.length
if (l === 2) {
if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
if (isVNode(propsOrChildren)) {
return createVNode(type, null, [propsOrChildren])
}
return createVNode(type, propsOrChildren)
}
return createVNode(type, null, propsOrChildren)
} else {
if (l === 3 && isVNode(children)) {
if (isArray(children)) {
children.unshift(propsOrChildren)
} else {
children = [propsOrChildren, children]
}
} else if (isNumber(children) || isString(children)) {
children = [children]
}
return createVNode(type, propsOrChildren, children)
}
}
从源码中我们可以看到，h函数的参数是不固定的，可以接受1到3个参数。如果只传递了两个参数，那么第二个参数如果是一个对象，则代表元素的属性信息，如果是一个数组，则代表元素的子节点信息。第三个参数则代表元素的子节点信息。由于在h函数中，我们将props和children参数都传递给了createVNode函数，因此在使用h函数创建虚拟节点时，createVNode函数会提供更多参数的选项。
四、Vuex函数和Vue3函数式
Vue3的函数式编程提供了新的方式来共享组件状态和逻辑。Vue3中的一个设计重心是让状态管理更加流畅和自然，因此在引入Vuex之后，Vue3也提供了一个函数式API，用于管理共享状态。
下面是使用Vue3函数式API的代码示例：
import { provide, reactive, computed, inject } from 'vue'
const storeSymbol = Symbol()
function useProvideStore() {
const state = reactive({
count: 0
})
const getters = computed(() => {
return {
doubleCount: state.count * 2
}
})
const mutations = {
increment(state) {
state.count++
}
}
provide(storeSymbol, {
state,
getters,
mutations
})
}
function useInjectStore() {
const store = inject(storeSymbol)
function increment() {
store.mutations.increment(store.state)
}
return {
state: store.state,
getters: store.getters,
increment
}
}
// 使用useProvideStore和useInjectStore方法，在父组件中共享状态
const parentComponent = {
setup() {
useProvideStore()
return {}
},
template: `
`,
components: {
ChildComponent
}
}
const ChildComponent = {
setup() {
const { state, getters, increment } = useInjectStore()
return {
count: state.count,
doubleCount: getters.doubleCount,
increment
}
},
template: `
当前计数器值：{{count}}
当前计数器的双倍值：{{doubleCount}}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/180079.html
微信扫一扫 
支付宝扫一扫 