Vue函数式组件是一种更加简洁的Vue组件定义方式,它可以帮助我们更好地复用代码,并且可以节省内存。函数式组件是一个无状态(没有data属性)、无实例(没有this上下文)的Vue组件。它只是一个函数,用于返回VNode。
函数式组件的语法非常简单,只需要在Vue中使用JavaScript函数即可创建一个函数式组件。该函数接受props作为其唯一的参数,并返回一个VNode对象。
// 函数式组件 const MyComponent = props => { return h('div', {}, props.message) }
此外,我们还可以使用ES6语法来创建函数式组件。
// ES6语法创建函数式组件 const MyComponent = (props) => { return h('div', {}, props.message) } // 或者使用ES6的arrow function语法 const MyComponent = props => h('div', {}, props.message) // 或者使用ES6的destructuring语法 const MyComponent = ({ message }) => h('div', {}, message)
当然,我们也可以将props传递到子元素中去。
// 函数式子元素 const MyComponent = (props) => { return h('div', {}, [ h('span', {}, 'Hello ' + props.name), h('span', {}, 'Goodbye ' + props.name), ]) }
此外,我们还可以在函数式子元素中使用JavaScript表达式来生成内容。
// 在子元素中使用表达式 const MyComponent = (props) => { return h('div', {}, [ h('span', {}, `Hello ${props.name}`), h('span', {}, `Goodbye ${props.name}`), ]) }
总之,Vue函数式子元素是一个非常有用的工具,它能够帮助我们快速而有效地创建Vue应用中的各个部分。它能够节省内存并更好地复用代码。因此,如果你想要快速而有效地创建Vue应用中的各个部分,那么你应该尝试使用Vue函数式子元素来实现这一目标。
就变化而言,属于高等级内容:
props
和 context
的普通函数创建 (即:slots
,attrs
,emit
)。functional
attribute 在单文件组件 (SFC) <template>
已被移除{ functional: true }
选项在通过函数创建组件已被移除更多信息,请继续阅读!
在 Vue 2 中,函数式组件有两个主要用例:
然而,在 Vue 3 中,有状态组件的性能已经提高到可以忽略不计的程度。此外,有状态组件现在还包括返回多个根节点的能力。
因此,函数式组件剩下的唯一用例就是简单组件,比如创建动态标题的组件。否则,建议你像平常一样使用有状态组件。
使用 <dynamic-heading>
组件,负责提供适当的标题 (即:h1
,h2
,h3
,等等),在 2.x 中,这可能是作为单个文件组件编写的:
// Vue 2 函数式组件示例
export default {
functional: true,
props: ["level"],
render(h, { props, data, children }) {
return h(`h${props.level}`, data, children)
}
}
或者,对于喜欢在单个文件组件中使用 <template>
的用户:
// Vue 2 函数式组件示例使用 <template>
<template functional>
<component
:is="`h${props.level}`"
v-bind="attrs"
v-on="listeners"
/>
</template>
<script>
export default {
props: ["level"]
}
</script>
现在在 Vue 3 中,所有的函数式组件都是用普通函数创建的,换句话说,不需要定义 { functional: true }
组件选项。
他们将接收两个参数:props
和 context
。context
参数是一个对象,包含组件的 attrs
,slots
,和 emit
property。
此外,现在不是在 render
函数中隐式提供 h
,而是全局导入 h
。
使用前面提到的 <dynamic-heading>
组件的示例,下面是它现在的样子。
import { h } from "vue"
const DynamicHeading = (props, context) => {
return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ["level"]
export default DynamicHeading
在 3.x 中,有状态组件和函数式组件之间的性能差异已经大大减少,并且在大多数用例中是微不足道的。因此,在 SFCs 上使用 functional
的开发人员的迁移路径是删除该 attribute,并将 props
的所有引用重命名为 $props
,将 attrs
重命名为 $attrs
。
使用之前的 <dynamic-heading>
示例,下面是它现在的样子。
<template>
<component
v-bind:is="`h${$props.level}`"
v-bind="$attrs"
/>
</template>
<script>
export default {
props: ["level"]
}
</script>
主要的区别在于:
functional
attribute 在 <template>
中移除listeners
现在作为 $attrs
的一部分传递,可以将其删除有关新函数式组件的用法和对渲染函数的更改的详细信息,见:
#name类型:string详细:允许组件模板递归地调用自身。注意,组件在全局用 Vue.createApp({}).component({}) 注册时,全局 ID 自...
提示已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅迁移指南!#Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建...
#概览$on,$off 和 $once 实例方法已被移除,应用实例不再实现事件触发接口。#2.x 语法在 2.x 中,Vue 实例可用于触发通过事件触...
#创建一个应用实例每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的:const app = Vue.createApp({})该应用实...