概念
setup
是Vue3.0
中一个新的配置项,其值为一个函数。
组件中所用到的数据、方法等等,都要在setup
中配置。
执行时机
在创建组件实例时,在beforeCreate之前执行(一次), 此时组件对象还没有创建,在初始化组件解析之后调用setup
。(在生命周期方面,在beforeCreate
钩子之前调用)
setup
方法是在 components , props , data , Methods , Computed , Lifecycle , methods
之前执行。
返回值
在 setup
中定义的状态、方法如果要在模板中使用,必须 return
,setup
函数有两种return
返回值:
1、一般都是返回一个对象,为模板提供数据,对象中的属性、方法被合并到渲染上下文,在模板中可以直接使用此对象中的所有属性/方法;
2、若返回一个渲染函数:则可以自定义渲染内容。
例如: return () => h(‘div’, [count.value, object.foo])
。
注意点
setup
尽量不要与Vue2.x
配置混用- 在
Vue2.x
配置(data、methos、computed…)中可以访问到setup
中的属性、方法 - 但是在
setup
中不能访问到Vue2.x
配置(data、methos、computed…
) - 如果有重名,
setup
优先 setup
不能是一个async
函数,因为返回值不再是return
的对象, 而是promise
,模板看不到return
对象中的属性。(后期也可以返回一个Promise
实例,但需要Suspense
和异步组件的配合)
实例
<template>
<div>
<h1></h1>
<div>
<p>msg is: {
{
msg