DEV Community
·
setup() 的基本概念
内容提要
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，且没有模板，则不需要返回任何内容。
