Vue3 setup函数的使用

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

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

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

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

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

基本语法：

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

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

    return {
      // 需要给 `