一、h和render
1、h是用来创建VNode的
// 第一个参数 节点类型 dom标签字符串
// 第二个参数 节点属性 div节点的属性
// 第三个参数 节点的子节点,包括插槽节点
h('div',
{
id: 'la',
class: ['la', 'bg-green'],
onClick: () => {
ctx.emit('xxx事件', '中国人')
},
name: 'jim',
age: 15
},
[]
)
2、render(option api)
- render选项和template模板做的是相同的事情,render的优先级更高些;使用render省去了template的编译过程。
- render选项是用来产出VNode的,所以它return是一个VNode或者JSX
- render选项中有个参数可以用,就是h函数
3、render函数
在vue3中,render函数可以直接从vue中导出使用,用来渲染VNode,eg:
render(VNode, 容器dom)
二、函数式组件的特点
特点:
1、没有任何管理状态
2、没有监听任何状态
3、本身没有实例(即没有this)
4、没有生命周期
5、只能接受一些prop的数据
优点:
1、渲染开销低、速度快、
场景:
主要用于简单的展示组件和高阶组件
三、vue3的函数式组件的写法
vue3中函数式组件就是一个函数
参数:props,ctx
返回:使用h函数返回一个VNode
import { h } from 'vue'
const Hello = (props, {attrs, emit, slots}) => {
return h(
'div',
{},
[
h('div', props.age),
slots.default(),
h('div'),
slots.bottom(msg)
]
)
}
<Hello :age="18">
<template #bottom="msg">
{{msg}}
</template>
</Hello>
四、高阶组件
1、高阶函数:
接受一个函数,返回一个函数,使得新的函数具有参数函数的能力的同时,又可以添加新功能
2、高阶组件:
也是一个函数,接受一个组件,返回一个新组件。新组件具有原有组件的功能,并拥有新的能力
3、高阶组件的意义:
意义在于封装,一种抽离vue模板内容的思想,相对于hooks、mixin(抽离业务逻辑的思想)
getNewComp.js
export default (comp) => {
return (props) => {
return h('div',[h('span',props.msg), h(comp)])
}
}
<template>
<Xxx msg="中国">
<script>
import getNewComp from './getNewComp.js'
import anyComp from '...'
export default {
components: {
Xxx: getNewComp(anyComp)
}
}