- setup 函数的基本概念
- 定义与位置：在 Vue 3 中，
setup函数是一个新的组件选项。它是在组件创建之前，属性解析之前被调用的，是组件初始化逻辑的入口点。这个函数接收两个参数：props和context。例如，在一个简单的 Vue 组件中：
<script> import { ref } from 'vue'; export default { setup(props, context) { // 组件逻辑代码 } }; </script>
- 作用范围：
setup函数内部的变量和函数只在setup函数执行期间存在，不会自动暴露给模板。如果要在模板中使用setup函数内部定义的变量或函数，需要通过return语句将它们返回。
- setup 函数的参数
- props 参数
- 数据传递：
props是一个对象，包含了父组件传递给当前组件的属性。这些属性是响应式的，意味着当父组件传递的属性值发生变化时，在setup函数内部可以感知到这种变化。例如，如果父组件传递了一个名为message的属性，在setup函数中可以这样访问：
<script> export default { setup(props) { console.log(props.message); } }; </script>
- 只读性质：在
setup函数中，props是只读的。这是为了防止子组件意外地修改父组件的数据，从而破坏数据的单向流动原则。如果试图修改props中的属性，Vue 会在控制台发出警告。 - context 参数
- 属性和方法概述：
context是一个包含了一些组件上下文信息的对象，包括attrs、slots、emit等。attrs包含了父组件传递过来的非props属性，slots用于访问组件的插槽内容，emit则用于在子组件中触发自定义事件，向父组件传递数据。 - 示例：使用 emit：假设在子组件中有一个按钮，点击按钮时要向父组件发送一个事件。在
setup函数中可以这样使用emit：
<script> import { ref } from 'vue'; export default { setup(props, context) { const count = ref(0); const increment = () => { count.value++; context.emit('increment', count.value); }; return { count, increment }; } }; </script>
当increment函数被调用时，不仅会更新count的值，还会通过emit触发一个名为increment的自定义事件，并将count的值传递给父组件。
3. 返回值的作用
- 暴露给模板：
setup函数返回的对象中的属性和函数可以在组件的模板中直接使用。例如，如果在setup函数中返回了一个名为count的响应式变量和一个名为increment的函数，在模板中可以这样使用：
<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template>
- 响应式数据的返回：返回的响应式数据（如通过
ref或reactive创建的数据）在模板中可以自动更新。例如，当count的值在setup函数中被修改后，模板中{{ count }}的显示内容也会随之更新。
- 与其他组件选项的关系
- 替代 beforeCreate 和 created 钩子：在 Vue 3 中，
setup函数的执行时机类似于beforeCreate和created钩子函数的执行时机。实际上，当使用setup函数后，就不需要再使用beforeCreate和created钩子了，因为setup函数已经涵盖了它们的功能。 - 与 data、computed 和 methods 的比较：
- data：在 Vue 2 中，组件的数据是通过
data函数返回一个对象来定义的。在 Vue 3 的setup函数中，可以使用ref或reactive来定义响应式数据，替代了data函数的功能。 - computed：在
setup函数中，可以使用computed函数来创建计算属性。例如：
<script> import { ref, computed } from 'vue'; export default { setup() { const count = ref(0); const doubleCount = computed(() => count.value * 2); return { count, doubleCount }; } }; </script>
- methods：在
setup函数中定义的函数可以替代Vue 2中的methods选项中的方法，并且这些函数可以方便地访问setup函数中定义的响应式数据。
- 使用场景和优势
- 逻辑复用：
setup函数可以方便地将组件的逻辑提取出来，通过组合多个setup函数，可以实现逻辑的复用。例如，可以创建一个包含数据获取和格式化功能的setup函数，然后在多个组件中使用这个setup函数。 - 更好的类型支持（与 TypeScript 结合）：在使用 TypeScript 开发 Vue 3 应用时，
setup函数提供了更好的类型支持。可以明确地定义props和context的类型，以及返回值的类型，使得代码更加健壮和易于维护。例如：
import { ref } from 'vue'; interface Props { message: string; } export default { setup(props: Props, context) { const count = ref(0); // 其他逻辑 return { count }; } };
