DEV Community
·
setup() 的基本概念
💡
原文约700字/词，阅读约需3分钟。
📝
内容提要
setup() 是 Composition API 的核心函数，用于定义组件的响应逻辑。它在组件创建前执行，接收 props 和 context 两个参数。可以使用 ref() 创建响应式值，使用 reactive() 创建响应式对象，并可在其中使用 computed() 和 watch() 等功能。返回的变量和函数可在模板中使用。
🎯
关键要点
- setup() 是 Composition API 的核心函数，用于定义组件的响应逻辑。
- setup() 在组件创建前执行，接收 props 和 context 两个参数。
- props 是组件的属性，context 提供访问内部功能的对象。
- 可以使用 ref() 创建响应式值，适合基本数据类型。
- 使用 reactive() 创建响应式对象或数组，直接访问其属性。
- computed() 用于创建基于响应性的派生值。
- watch() 观察响应式值的变化并执行相应的操作。
- setup() 是 Composition API 的核心，理解 ref() 和 reactive() 的使用至关重要。
- 需要返回变量或函数以便在模板中使用时，必须在 setup() 中进行返回。
- 使用 <script setup> 时，返回是自动的，但在 export default 中需要手动返回。
- 创建纯逻辑组件或 composable 时，不需要返回任何内容。
❓
延伸问答
什么是 setup() 函数？
setup() 是 Composition API 的核心函数，用于定义组件的响应逻辑。
setup() 函数接收哪些参数？
setup() 接收两个参数：props 和 context。
如何在 setup() 中创建响应式值？
可以使用 ref() 创建响应式值，适合基本数据类型，使用 reactive() 创建响应式对象或数组。
computed() 和 watch() 在 setup() 中有什么用？
computed() 用于创建基于响应性的派生值，watch() 观察响应式值的变化并执行相应的操作。
在使用 <script setup> 时，返回值有什么特别之处？
使用 <script setup> 时，返回是自动的，不需要手动返回。
什么情况下不需要在 setup() 中返回内容？
如果创建的是纯逻辑组件或 composable，且没有模板，则不需要返回任何内容。
🏷️
标签
➡️
