Vue.js script setup 响应式详解:ref, computed, watch
96 浏览量
更新于2024-08-03
收藏 9KB MD 举报
"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>`语法下,这些特性的使用更加简洁,使得代码更加易读和维护。
5803 浏览量
3901 浏览量
125 浏览量
2024-09-19 上传
179 浏览量
2024-11-19 上传
2024-12-10 上传
2024-12-06 上传
2024-09-28 上传

田七三两
- 粉丝: 4
最新资源
- Android平台DoKV:小巧强大Key-Value管理框架介绍
- Java图书管理系统源码与MySQL的无缝结合
- C语言实现JSON与结构体间的互转功能
- 快速标签插件:将构建信息轻松嵌入Java应用
- kimsoft-jscalendar:多语言、兼容主流浏览器的日历控件
- RxJava实现Android多线程下载与断点续传工具
- 直观示例展示JQuery UI插件强大功能
- Visual Studio代码PPA在Ubuntu中的安装指南
- 电子通信毕业设计必备:元器件与芯片资料大全
- LCD1602显示模块编程入门教程
- MySQL5.5安装教程与界面展示软件下载
- React Redux SweetAlert集成指南:增强交互与API简化
- .NET 2.0实现JSON数据生成与解析教程
- 上海交通大学计算机体系结构精品课件
- VC++开发的屏幕键盘工具与源码解析
- Android高效多线程图片下载与缓存解决方案