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() 函数在组件创建之前执行，因此无法访问 this。这意味着在 setup() 中定义的逻辑与传统的 Options API 有所不同，开发者需要适应这种新的思维方式，以便更好地利用 Composition API 的优势。
响应式数据的选择
在 setup() 中，使用 ref() 和 reactive() 创建响应式数据时，选择合适的方法至关重要。ref() 适合基本数据类型，而 reactive() 更适合对象和数组。理解这两者的区别可以帮助开发者更高效地管理组件状态。
返回值的重要性
在 setup() 中，只有返回的变量和函数才能在模板中使用。如果使用 <script setup>，返回是自动的，但在 export default 中需要手动返回。这一点在组件设计时需要特别注意，以确保模板能够正确访问所需的数据和方法。
延伸问答
什么是 setup() 函数？
setup() 是 Composition API 的核心函数，用于定义组件的响应逻辑。
setup() 函数接收哪些参数？
setup() 接收两个参数：props 和 context。
如何在 setup() 中创建响应式值？
可以使用 ref() 创建响应式值，适合基本数据类型，使用 reactive() 创建响应式对象或数组。
computed() 和 watch() 在 setup() 中有什么用？
computed() 用于创建基于响应性的派生值，watch() 观察响应式值的变化并执行相应的操作。
在使用 <script setup> 时，返回值有什么特别之处？
使用 <script setup> 时，返回是自动的，不需要手动返回。
什么情况下不需要在 setup() 中返回内容？
如果创建的是纯逻辑组件或 composable，且没有模板，则不需要返回任何内容。
