Skip to content

Vue函数式组件与正常组件区别

1.函数式组件需要在声明组件时指定 functional
2.不需要实例化,所以没有this,this通过render函数的第二个参数来代替
3.没有生命周期钩子函数,不能使用计算属性,watch
4.不能通过$emit 对外暴露事件,调用事件只能通过context.listeners.click的方式调用外部传入的事件
5.因为函数式组件是没有实例化的,所以在外部通过ref去引用组件时,实际引用的是HTMLElement
6.函数式组件的props可以不用显示声明,所以没有在props里面声明的属性都会被自动隐式解析为prop,而普通组件所有未声明的属性都

场景值

各组件都有各自己的slots,如果使用非函数式组件就会出现
父组件slot->三个组件同时引入->根据条件判断->再写一遍父元素引入的slot 问题1:

  • 不必要的资源重复引入,三个组件
  • 代码不优雅
  • A组件
    • 可能A-1组件
    • 可能A-2组件
    • 可能A-3组件

解决方案

  • 组件通过import异步引入
  • 组件通过helper函数标志已加载
  • 通过render函数去渲染

文档

上次更新于: