Vue3学习笔记：初识响应性API

前端

2024-01-18 09:33:40

响应性API：Vue.js中管理响应式数据的关键工具

在Vue.js 3中，响应性API是创建和管理响应式数据不可或缺的工具。响应式数据是指能够在值发生更改时自动触发视图更新的数据。这对于构建响应用户交互和数据变化的动态应用程序至关重要。

响应性API的分类

响应性API分为三大类：

组合式API ：一种新的特性，用于以更声明的方式创建和使用响应式数据。
响应式基础API ：用于创建和管理响应式数据的低级API。
响应式包装API ：用于将普通对象和数组转换为响应式对象的API。

组合式API

组合式API提供了一组强大而灵活的方法：

reactive() ：创建一个响应式对象。
toRefs() ：将响应式对象转换为普通对象，包含对该对象各个属性的引用。
ref() ：创建一个可变的响应式引用。

这些方法允许您轻松创建和重用响应式数据，并将其与其他响应式数据相结合。

响应式基础API

响应式基础API提供低级方法，用于精细地操纵响应式数据：

Vue.set() ：将属性添加到响应式对象。
Vue.delete() ：从响应式对象中删除属性。
Vue.watch() ：监听响应式对象的属性值的变化。

这些方法对于在需要更多控制的情况下管理响应式数据非常有用。

响应式包装API

响应式包装API允许您将普通数据结构转换为响应式对象：

Vue.observable() ：将普通对象转换为响应式对象。
Vue.computed() ：创建计算属性，其值依赖于其他响应式数据。
Vue.watchEffect() ：创建副作用函数，在响应式数据发生变化时执行。

这些方法使您可以轻松使用非响应式数据，并使其具有响应式功能。

实战应用

让我们通过一个示例了解响应性API如何发挥作用：

import { ref, reactive, watch } from 'vue';

const data = reactive({ count: 0 });
const countRef = ref(0);

watch(data, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

countRef.value++; // 触发count的变化

const doubledCount = ref(data.count * 2); // 计算属性，依赖于count

console.log(doubledCount.value); // 0 (初始值)
data.count++; // 更改count
console.log(doubledCount.value); // 2 (自动更新)