Vue3要点初见：组合式 API 的基础 —— setup

一、setup 是什么？
为了开始使用组合式 API，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 setup。
它是一个组件选项。
二、在哪里使用 setup ？
setup 是一个组件选项，所以像别的组件选项一样，写在组件导出的对象里。

<script>
  export default {
    name: "App",
    setup() {
      // ...

      return {
        // ...
      }
    },
  }
</script>

三、使用 setup 的正确姿势
官方文档如此描述：
setup 选项应该是一个接受 props 和 context 的函数。
此外，我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

个人觉得可以理解为：

setup 选项应该为一个函数
setup 选项函数接受两个参数： props 和 context
setup 选项函数需要返回要暴露给组件的内容

setup 函数的参数

1. setup 函数中的第一个参数 —— props
   正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

WARNING:
但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来安全地完成此操作。

// MyBook.vue

import { toRefs } from 'vue'

setup(props) {
    const { title } = toRefs(props)

    console.log(title.value)
}

2. setup 函数中的第二个参数 —— context
   context 上下文是一个普通的 JavaScript 对象，它暴露三个组件的 property：

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}