Vue3 新特性之函数式组件(非兼容)

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

记录 && 积累! 之前有几篇文章有作 Vue3学习总结的开始:

• Vue3-v-model (非兼容),
• Vue3-fragments (新增),
• Vue3-defAsyncComponent 异步组件(新增),
• Vue3-Suspense 处理异步请求,
• Vue3-Teleport 改变组件挂载的根节点,
• Vue3-computed & watch,
• Vue3-生命周期 和 setup()函数,
• Vue3-初体验,

Vue3.x 官方文档 , 本文继续来学习: Vue3 的新特性之 非兼容的函数式组件

Vue 2.x 函数式组件应用场景:

函数式组件 的两个主要应用场景:

1. 用于性能优化方面，因为函数式组件的初始化速度比有状态组件快得多

   而函数式组件带来的性能方面的提高, 在 Vue3.x 中的有状态组件已经得到提高, 所以函数式组件在这提高性能方面可以忽略

2. 用于返回多个根节点

   在上一篇文章我们已经学到: 现在 在 Vue3.x 中组件可以拥有多个根节点,

Vue3 函数式组件 :

关于 函数式组件 官方文档中给出的一些变化:

在 Vue3.x 中, Vue2.x 带来的函数式组件的性能提升可以忽略不计，因此我们建议只使用有状态的组件

函数式组件只能由接收 props 和 context (即：slots、attrs、emit) 的普通函数创建

下面列举的两条非兼容的变化:

非兼容:

• functional attribute 已从单文件组件 (SFC) 的 <template> 中移除；
• { functional: true } 选项已从通过函数创建的组件中移除；

函数式组件 的使用

在 Vue2.x 中函数式组件 语法

对于v-model 在组件上使用时, 就相当于绑定一个 value prop 并触发 input 事件

v-model 相当于一个语法糖, 是对绑定值和触发input事件的简写:

// Vue 2.x 函数式组件 创建
export default {
  functional: true,
  props: ['level'],
  render(h, { props, data, children }) {
    return h(`h${props.level}`, data, children)
  },
}

在 Vue3.x 中函数式组件 语法

而函数式组件的作用也没那么大了, 可以用作简单的组件封装: 比方说一个简单的页面标题 title 组件

现在，在 Vue3 中，所有的函数式组件都是用普通函数创建的。也就是说，不再需要定义 { functional: true } 这个组件选项。

import { h } from 'vue'

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

DynamicHeading.props = ['level']

export default DynamicHeading