深入了解 Vue:探索合成 API 的奥秘
1、什么是组合式API
Vue 3中引入了组合式API,它是一种新的代码组织方式,旨在让开发者更灵活地组织和重用Vue组件的逻辑。通过组合式API,开发者可以将相关的代码逻辑组合在一起,而不是按照选项属性或生命周期函数的方式来组织代码。这样可以更好地封装和重用逻辑,使得组件更易于维护和理解。
组合式API的核心是setup
函数,它替代了Vue 2中的data
、computed
、methods
等选项,用于设置组件的初始状态、计算属性、方法等。在setup
函数内部,可以使用诸如ref
、reactive
等新的函数来定义响应式数据,以及使用watch
、computed
等函数来定义响应式的副作用和计算属性。
2、基本使用
<template>
<h1>App 组件 --- {{ num }}</h1>
<button @click="addNum">数据自增</button>
</template>
<script setup>
import { ref } from 'vue'
const num = ref(100)
function addNum() {
num.value++
}
</script>
3. ref
组合式API中的ref
是一个用于标识和引用资源的机制。它可以用来指定要操作的特定资源,也可以用来表示资源的关系和层次结构。在详细理解上,可以从以下几个方面来解释:
- 唯一标识符:
ref
是一个唯一标识符,用于在组合式API中准确定位资源。它可以是资源的ID、路径或者其他形式的标识符,确保每个资源都有一个独一无二的引用。 - 资源定位:通过
ref
,可以指定要操作的具体资源,例如某个特定的文档、数据集合或者API端点。这样可以确保API请求针对正确的资源进行处理。 - 嵌套关系:
ref
还可以表示资源之间的嵌套关系或者层次结构。例如,可以使用ref
来表示文档所属的集合,或者表示父子文档之间的关系。 - 引用传递:在组合式API中,
ref
还可以作为参数传递给其他API请求,用于表示资源之间的关联。这样可以实现跨资源的操作和查询。
总之,ref
在组合式API中扮演着非常重要的角色,它是确保API请求准确、精确地定位和操作资源的关键。对ref
的详细理解有助于正确构建和使用组合式API请求,从而实现对资源的有效管理和操作。
4.reactive
组合式API中的reactive
指的是API的响应式特性。这意味着当底层数据发生变化时,API将自动更新并通知相关的订阅者。这种响应式特性使得组合式API能够实现实时数据更新和自动同步,从而提供了更加灵活和高效的数据交互方式。
具体来说,组合式API的reactive
特性可以从以下几个方面进行详细理解:
- 数据响应:当底层数据发生变化时,
reactive
API能够自动感知并更新相关的数据。这意味着无需手动轮询或者刷新数据,API将会自动将最新的数据推送给订阅者。 - 实时更新:
reactive
API支持实时数据更新,这意味着当数据发生变化时,相关的订阅者会立即收到更新的通知。这种实时性能够满足对于实时数据交互的需求。 - 响应式查询:通过
reactive
API可以进行响应式查询,即当查询条件满足时,API会自动推送相应的数据变化。这种特性能够实现类似于数据库订阅的功能,对于实时数据查询和展示非常有用。 - 订阅机制:
reactive
API通常会提供订阅机制,让客户端能够注册对某个数据源的订阅,一旦数据发生变化就能够得到通知。这种机制使得数据交互更加灵活和高效。
总之,组合式API的reactive
特性使得数据交互变得更加实时、高效和灵活,能够满足现代应用对于实时数据交互的需求。对reactive
的详细理解有助于充分发挥组合式API的优势,并构建出更加响应式和高效的应用程序。
总的来说,组合式API提供了一种更灵活、更可组合、更易于测试和重用的方式来组织Vue组件的逻辑。
5. shallowRef, shallowReactive
可以帮助我们创建一个响应式数据,但是只有第一层数据有响应式,深层数据没有响应式,除此之外,用法和 ref/reactive 完全相同
6.toRaw
有些时候我们不希望数据进行响应式实时更新,可以通过 toRaw 获取 ref 或 reactive 引用的原始数据,通过修改原始数据,不会造成页面的更新,只有通过修改 ref 和 reactive 包装后的数据时才发生界面响应式变化
<template>
<div>
<button @click="update">+1</button>
{{ info.name }}
<button @click="rawUpdate">取消响应式修改</button>
</div>
</template>
<script setup>
import { reactive, toRaw } from "vue";
const info = reactive({
name: "张三",
});
const update = () => {
info.name = info.name + 1;
};
const rawUpdate = () => {
/**
* 取消响应式
* 注意:toRaw 只能用作引用数据类型
*/
const a = toRaw(info);
// 后续修改失去作用
a.name = "李四";
};
</script>
7.markRaw
markRaw 包装后的数据永远不会被追踪,在开发中不会使用
8. toRef
toRef 是对定义的响应对象的某个属性进行引用
<template>
<div>
{{ info.name }} --- {{ info.age }}
<button @click="updateName">修改名字</button>
</div>
</template>
<script setup>
import { ref, toRef } from "vue";
const info = {
name: "张三",
age: 18,
};
/**
* 从info对象中取出name属性, 并加上响应式
*
* 返回的nameRef 的 value属性的值 就是 name的值
*/
const nameRef = toRef(info, "name");
const updateName = () => {
// 把name改成李四
nameRef.value = "李四";
};
</script>
9. toRefs
遍历对象中的所有属性,将其变成响应式数据,这是因为 toRef 只能传一个 key,toRefs 所达到的效果 与 toRef 一样
const state = reactive({
foo: 1,
bar: 2,
});
const stateAsRefs = toRefs(state);
/*
stateAsRefs 的类型:{
foo: Ref<number>,
bar: Ref<number>
}
*/
// 这个 ref 和源属性已经“链接上了”
state.foo++;
console.log(stateAsRefs.foo.value); // 2
stateAsRefs.foo.value++;
console.log(state.foo); // 3