Vue函数式组件专篇深入分析
更新时间：2023年01月05日 15:00:06 作者：loyd3
Vue提供了一种称为函数式组件的组件类型,用来定义那些没有响应数据,也不需要有任何生命周期的场景,它只接受一些props来显示组件,下面这篇文章主要给大家介绍了关于Vue高级组件之函数式组件的使用场景与源码分析的相关资料,需要的朋友可以参考下
函数式组件的实现相对容易。一个函数式组件本质上就是一个普通函数，该函数的返回值是虚拟DOM。
在用户接口层面，一个函数式组件就是一个返回虚拟DOM的函数，如下面的代码所示：
function MyFuncComp(props){
return {type:'h1',children: porps.title}
}
函数式组件没有自身状态，但仍然可以接收由外部传入的props。为了给函数式组件定义props，需要在组件函数上添加静态的props属性，如下面代码所示：
function MyFuncComp(props){
return {type:'h1',children:props.title}
}
// 定义props
MyFuncComp.props = {
title: String
}
在有状态组件的基础上，实现函数式组件将变得非常简单，因为挂载组件的逻辑可以复用mountComponent函数，为此，需要在patch函数内支持函数类型的vnode.type，如下面patch函数的代码所示：
function patch(n1,n2,container, anchor){
if(n1 && n1.type !== n2.type){
unmount(n1)
n1 = null
}
const {type} = n2
if(typeof type === 'string'){
// 省略部分代码
}else if(type === Text) {
// 省略部分代码
}else if(type === Fragment) {
// 省略部分代码
}else if(type === 'object' || typeof type === 'function') {
// component
if(!n1){
mountComponent(n2,container,anchor)
}else{
patchComponent(n1,n2,anchor)
}
}
}
在patch函数内部，通过检测vnode.type的类型来判断组件的类型
- 如果vnode.type是一个对象，则它是一个有状态组件，并且vnode.type是组件选项对象；
- 如果vnode.type是一个函数，则它是一个函数式组件
下面是修改后的mountComponent函数，其支持挂载函数式组件：
function mountComponent(vnode,container,anchor){
// 检查是否是函数式组件
const isFunctional = typeof vnode.type === 'function'
let componentOptions = vnode.type
if(isFunctional){
// 如果是函数式组件，则将vnode.type作为渲染函数，将vnode.type.props作为props选项定义即可
componentOptions = {
render:vnode.type,
props: vnode.type.props
}
}
// 省略部分代码
}
实现对函数式组件的兼容非常简单。首先，在mountComponent函数内检查组件的类型，如果是函数式组件，则直接将组件函数作为组件选项对象的render选项，并将组件函数的静态props属性作为组件的props选项即可。
当然，出于更加严谨的考虑，我们需要通过isFunctional变量实现选择性地执行初始化逻辑，
到此这篇关于Vue函数式组件专篇深入分析的文章就介绍到这了,更多相关Vue函数式组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue+Echarts报错Cannot set properties of undefined (settin
这篇文章主要介绍了Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了React DOM diff 对比Vue DOM diff 区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家详细介绍了Vue dialog模态框的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
vue中的render函数,它返回的是一个虚拟节点vnode,也就是我们要渲染的节点,下面这篇文章主要给大家介绍了关于Vue中render函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
vue.js中created()与activated()的个人使用解读
这篇文章主要介绍了vue.js中created()与activated()的个人使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
今天小编就为大家分享一篇使用vue.js在页面内组件监听scroll事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue数据驱动模拟实现的相关资料，允许采用简洁的模板语法声明式的将数据渲染进DOM，且数据与DOM绑定在一起，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
下面小编就为大家带来一篇浅谈vue-router2路由参数注意的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要为大家介绍了Vue3组件挂载之创建组件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下2019-10-10
最新评论