Vue3 setup函数的使用

全新的 setup 函数
在开始编写 Vue 组件之前，需要了解两个全新的前置知识点：

全新的 setup 函数，关系到组件的生命周期和渲染等问题
写 TypeScript 组件离不开的 defineComponent API

setup 的含义
Vue 3 的 Composition API 系列里，推出了一个全新的 setup 函数，它是一个组件选项，在创建组件之前执行，一旦 props 被解析，并作为组合式 API 的入口点。

说的通俗一点，就是在使用 Vue 3 生命周期的情况下，整个组件相关的业务代码，都可以放在 setup 里执行。

因为在 setup 之后，其他的生命周期才会被启用（点击了解：组件的生命周期）。

基本语法：

// 这是一个基于 TypeScript 的 Vue 组件
import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, context) {
    // 在这里声明数据，或者编写函数并在这里执行它

    return {
      // 需要给 `<template />` 用的数据或函数，在这里 `return` 出去
    }
  },
})

在使用 setup 的情况下，请牢记一点：不能再用 this 来获取 Vue 实例，也就是无法和 Vue 2 一样，通过 this.foo 、 this.bar() 这样来获取实例上的数据，或者执行实例上的方法。

setup 的参数使用

setup 函数包含了两个入参：

第一个参数 props ：

它是响应式的，当父组件传入新的数据时，它将被更新。

TIP

请不要解构它，这样会让数据失去响应性，一旦父组件发生数据变化，解构后的变量将无法同步更新为最新的值。

可以使用 Vue 3 全新的响应式 API toRef / toRefs 进行响应式数据转换

第二个参数 context ：

context 只是一个普通的对象，它暴露三个组件的 Property ：

因为 context 只是一个普通对象，所以可以直接使用 ES6 解构。

平时使用可以通过直接传入 { emit } ，即可用 emit(‘xxx’) 来代替使用 context.emit(‘xxx’)，另外两个功能也是如此。

但是 attrs 和 slots 请保持 attrs.xxx、slots.xxx 的方式来使用其数据，不要进行解构，虽然这两个属性不是响应式对象，但对应的数据会随组件本身的更新而更新。
defineComponent 的作用
defineComponent 是 Vue 3 推出的一个全新 API ，可用于对 TypeScript 代码的类型推导，帮助开发者简化掉很多编码过程中的类型声明。