木灵鱼儿

木灵鱼儿

阅读:190

最后更新:2022/08/18/ 23:45:47

vue3 函数式组件 functional

由于vue3对dom的渲染做了优化,优化了diff算法,在vue2时不管元素是否参与更新,都会被重新创建,vue3则针对不参与更新的元素,打上一个静态标记,此时这个元素只会创建一次,后续的渲染更新则不会重新创建。

于是函数式组件在vue3中性能的提升可以忽略不计,于是functional组件的声明被移除,不在支持:

  1. template中不能再写上functional来表示函数式组件
  2. vue组件中的{ functional: true }选项也被删除

但是,这也并不意味着无法创建函数式组件了,vue3也有提供创建的方式,但是需要引入h函数。

创建一个js组件:_test.js_

import { h } from 'vue'

const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots)
}

DynamicHeading.props = ['level']

export default DynamicHeading

我们只能导出一个函数的方式来声明一个函数式组件,并且函数还需要添加一个props属性,用于声明接受的变量。

由于性能没啥提升,可以作为额外的知识了解。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 190

相关文章

目录树