概念
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 }}</p>
<a-button @click="getMsg">点击</a-button>
</div>
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
// 定义响应式变量
const msg = ref('Hello, this is example page!')
function getMsg() {
// 访问该变量
console.log(msg.value)
}
// 返回变量
return { msg, getMsg }
},
}
</script>
页面及点击按钮效果:
setup
的参数
格式:
setup(props, context) / setup(props, {attrs, slots, emit})
props
: 父组件传递过来的属性, setup
函数中 props
是响应式的,它会随着数据更新而更新,并且不能使用 ES6
解构,因为它会不能使 props
为响应式。
context
: 是一个普通的对象,暴露3个组件的· property
-
Attribute
attrs
: 包含没有在props配置中声明的属性的对象, 相当于this.$attrs
-
插槽
slots
: 包含所有传入的插槽内容的对象, 相当于this.$slots
-
触发事件
emit
: 用来分发自定义事件的函数, 相当于this.$emit
实例:
<template>
<h1>{{ msg }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Index',
props: {
msg: { type: String, default: 'This is default props' },
},
setup(props, { attrs, slots, emit }) {
console.log('attrs---', attrs)
console.log('slots---', slots)
console.log('emit---', emit)
console.log('props.msg---', props.msg)
return {
msg: props.msg,
}
},
})
</script>
打印结果: