深入探究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特性可以从以下几个方面进行详细理解：
- 数据响应：当底层数据发生变化时，
reactiveAPI能够自动感知并更新相关的数据。这意味着无需手动轮询或者刷新数据，API将会自动将最新的数据推送给订阅者。 - 实时更新：
reactiveAPI支持实时数据更新，这意味着当数据发生变化时，相关的订阅者会立即收到更新的通知。这种实时性能够满足对于实时数据交互的需求。 - 响应式查询：通过
reactiveAPI可以进行响应式查询，即当查询条件满足时，API会自动推送相应的数据变化。这种特性能够实现类似于数据库订阅的功能，对于实时数据查询和展示非常有用。 - 订阅机制：
reactiveAPI通常会提供订阅机制，让客户端能够注册对某个数据源的订阅，一旦数据发生变化就能够得到通知。这种机制使得数据交互更加灵活和高效。
总之，组合式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
以上就是深入探究Vue中探究组合式API的奥秘的详细内容，更多关于Vue 组合式API的资料请关注脚本之家其它相关文章！