更多前端资料,《前端Tool》小程序。
1. 函数式组件:函数组件不需要实例化,无状态,没有生命周期,所以渲染性能要好于普通组件,不需要实例化,没有this,this式通过render函数的第二个参数context来替代,所以在外部通过ref去引用组件时,实际引用的时HTMLElement。没有生命周期,也就不能使用computed,watch。不能通过$emit对外暴露事件,调用事件只能通过context.$emit.click方式调用外部传入的事件。
- 在vue2中使用函数组件:需要指定functional:true
export default{
functional:true,
render(h,context){
return h(节点,节点属性,子节点)
}
}
/**
节点:可以是一个html标签、组、异步组件、函数式组件。
节点属性:{object},支持props,attributes以及事件对应的对象,默认为null。
子节点:{String | Object | Array},支持text文本、h函数构造对象、有插槽的对象
**/
- 在vue3中使用函数组件:
import {h} from 'vue'
const ResultText = (props,context)=>{
return h(节点,节点属性,子节点)
}
export default ResultText;