setup相关知识点

一、setup 函数

setup() 函数是在 beforeCreate 钩子之前执行的一个函数。

setup 接收 2 个参数：

• props：一个响应式的对象，包含了从父组件中传过来的所有属性。不能使用 ES6 解构。
• context：一个普通的对象，暴露了其它可能在 setup 中有用的值。能使用 ES6 解构。

setup 的返回值：

• 一个对象：对象里的属性都可以在模板中使用。
  当 setup 函数返回一个对象时，该对象里的属性均可在模板中使用。只不过，如果该属性是个对象，在模板里使用该对象时，该对象会被自动浅解包，因此，不应在模板中直接使用 对象.属性名 的形式访问该对象里的属性。
• 一个函数：该函数可以直接使用在同一作用域中声明的响应式状态。

setup 函数的特点：

• 在 setup 函数中定义的变量和方法，必须将它们 return 到最后的结果对象中去，才能在 template 模板中使用它们。

setup 函数的使用：

<template>
  <div>{{ str }}</div>
  <div v-for="(item, idx) in list" :key="idx"></div>
  <div>{{ obj }}</div>
</template>

<script>
  import { ref, reactive, toRefs } from 'vue'

  export default {
    setup() {
      const str = ref('qwert')
      const list = ref([])
      const obj = reactive({})

      return {
        str,
        list,
        ...toRefs(obj)
      }
    }
  }
</script>

可访问到属性	不可访问到的属性
props	data
attrs	computed
slots	methods
emit	refs

二、defineComponent 函数

defineComponent 函数是 setup 函数的语法糖之一。

defineComponent 函数支持 TypeScript 的参数类型推断（专为 TS 准备的）。若使用的是 ts + vue3，强力推荐使用它。

1、defineComponent 函数的一般用法

<template>
  <div>{{ str }}</div>
  <div v-for="(item, idx) in list" :key="idx"></div>
  <div>{{ obj }}</div>
</template>
<script>
  import { ref, toRefs, reactive, defineComponent } from 'vue'

  export default defineComponent({
    setup() {
      const str = ref('qwert')
      const list = ref([])
      const obj = reactive({})
  
      return {
        str,
        list,
        ...toRefs(obj)
      }
    }
  })
</script>

2、ts + vue3 中使用 defineComponent 函数

import { defineComponent, PropType} from 'vue';
interface UserInfo = {
  id: number,
  name: string,
  age: number
}
export default defineComponent({
//props需要使用PropType泛型来约束。
  props: {
    userInfo: {
      type: Object as PropType<UserInfo>, // 泛型类型
      required: true
    }
  },
})

三、<script setup> 标签

<script setup>标签又称 setup 文件，是 setup 函数的语法糖之一。

setup 文件的特点：

对于在 setup 文件中定义的属性和方法，无需将它们 return 到最后的结果对象中去，直接在 template 模板中使用它们即可。

<template>
  <div>{{ str }}</div>
  <div v-for="(item, idx) in list" :key="idx"></div>
  <div>{{ obj }}</div>
</template>
<script setup>
  import { ref, reactive } from 'vue'

  const str = ref('qwert')
  const list = ref([])
  const obj = reactive({})
</script>

---