setup
- 类型:
Function
setup
函数是一个新的组件选项。它作为在组件内部使用组合式 API 的入口点。
-
调用时间
在创建组件实例时,在初始 prop 解析之后立即调用
setup
。在生命周期方面,它是在 beforeCreate 钩子之前调用的。 -
模板使用
如果
setup
返回一个对象,则该对象的属性将合并到组件模板的渲染上下文中:<template> <div>{{ count }} {{ object.foo }}</div> </template> <script> import { ref, reactive } from 'vue' export default { setup() { const count = ref(0) const object = reactive({ foo: 'bar' }) // 暴露到template中 return { count, object } } } </script>
请注意,从
setup
返回的 refs 在模板中访问时会自动展开,因此模板中不需要.value
。 -
渲染函数/JSX 的方法
setup
还可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态:import { h, ref, reactive } from 'vue' export default { setup() { const count = ref(0) const object = reactive({ foo: 'bar' }) return () => h('div', [count.value, object.foo]) } }
-
参数
该函数将接收到的 prop 作为其第一个参数:
export default { props: { name: String }, setup(props) { console.log(props.name) } }
请注意,此
props
对象是响应式的——即在传入新的 props 时会对其进行更新,并且可以通过使用watchEffect
或watch
进行观测和响应:export default { props: { name: String }, setup(props) { watchEffect(() => { console.log(`name is: ` + props.name) }) } }
但是,请不要解构
props
对象,因为它会失去响应式:export default { props: { name: String }, setup({ name }) { watchEffect(() => { console.log(`name is: ` + name) // 没有响应式 }) } }
props
对象在开发过程中对于用户区代码是不可变的 (如果用户代码尝试对其进行更改,则会发出警告)。第二个参数提供了一个上下文对象,该对象暴露了以前在
this
上暴露的 property 的选择列表:const MyComponent = { setup(props, context) { context.attrs context.slots context.emit } }
attrs
和slots
是内部组件实例上相应值的代理。这样可以确保它们即使在更新后也始终会显示最新值,以便我们可以对它们进行结构分解,而不必担心访问老的引用:const MyComponent = { setup(props, { attrs }) { // 稍后可能会调用的函数 function onClick() { console.log(attrs.foo) // 保证是最新引用 } } }
有很多理由将
props
作为单独的第一个参数而不是将其包含在上下文中:-
组件使用
props
比其他 property 更常见,并且很多情况下组件仅使用props
。 -
将
props
作为单独的参数可以使单独键入更容易,而不会弄乱上下文中其他 property 的类型。这也使得在具有 TSX 支持的setup
、render
和普通功能组件之间保持一致的签名成为可能。
-
-
参考 组合式 API