深入探究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

以上就是深入探究Vue中探究组合式API的奥秘的详细内容，更多关于Vue 组合式API的资料请关注脚本之家其它相关文章！

最新评论