概念

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])。

注意点

1. setup 尽量不要与 Vue2.x 配置混用
2. 在Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法
3. 但是在setup中不能访问到Vue2.x配置（data、methos、computed…）
4. 如果有重名， setup优先
5. 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

1. Attribute attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs

2. 插槽 slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots

3. 触发事件 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>

打印结果：