Vue.js script setup 响应式详解：ref, computed, watch

"Vue3中的<script setup>响应式：核心特性" 在Vue3中，`<script setup>`是一种组合式API的语法糖，它简化了组件的定义方式，同时提供了更直接的响应式处理机制。本资源主要介绍了在`<script setup>`中使用的几个核心响应式特性，包括`ref()`、`computed()`、`reactive()`、`readonly()`以及不同类型的`watch`方法。 1. `ref()`: `ref`对象用于创建一个响应式的引用。它接受一个初始值（可以是基本类型或复杂类型），返回一个具有`.value`属性的对象。`.value`属性的修改会触发视图更新。例如： ```ts import { ref } from "vue"; const count = ref<number>(0); count.value++; ``` 这里，`count`的值可以通过`.value`获取和修改，且变化会被追踪。 2. `computed()`: `computed`用于创建计算属性，这些属性依赖于其他响应式数据并自动更新。分为只读和可读可写两种： - 只读计算属性接收一个getter函数，返回一个只读的响应式ref对象。 ```ts const count1 = ref<number>(1); const plusOne = computed(() => count1.value + 1); console.log(plusOne.value); // 2 plusOne.value++; // 报错，只读属性不能修改 ``` - 可读可写计算属性则接受一个带有`get`和`set`方法的对象，返回一个可写的ref对象。 3. `reactive()`: 用于将普通对象转换为响应式对象，整个对象及其嵌套属性都是响应式的。适用于复杂数据结构的响应式需求。 4. `readonly()`: 创建一个只读的响应式版本的给定对象。修改只读对象的属性不会触发视图更新。 5. `watch()`、`watchEffect()`、`watchPostEffect()`和`watchSyncEffect()`: 这些是Vue3中观察和监听数据变化的方法： - `watch`用于监听单个或多个响应式源，当源发生变化时，执行回调函数。 - `watchEffect`会在初始渲染及任何依赖变更时运行副作用，依赖追踪是自动的。 - `watchPostEffect`与`watchEffect`相似，但它的副作用会在所有同步副作用之后运行。 - `watchSyncEffect`类似`watchEffect`，但其副作用在当前运行的微任务队列中同步执行。 了解并熟练使用这些响应式特性，可以帮助开发者更高效地编写Vue3组件，实现数据和视图间的双向绑定，从而构建出更动态、响应更快的应用。在`<script setup>`语法下，这些特性的使用更加简洁，使得代码更加易读和维护。