Vue中ref、computed与reactive使用频率现象分析(示例详解)

人入成年没兄弟

一、ref的特性与优势


（一）简单明了的响应式基础

ref 用于创建基本数据类型的响应式数据。它的值是通过

1. .value

复制代码

来访问的，这在理解和使用上相对直观。对于从传统 JavaScript 开发过渡到 Vue 的开发者来说，这种方式更容易接受。例如，当我们需要创建一个简单的数字类型的响应式数据时：

1. import { ref } from 'vue';
   
2. const count = ref(0);

复制代码

我们可以在模板中直接使用

1. count.value

复制代码

来更新和获取数据，这种简单的机制使得它在处理一些小型、独立的数据响应式需求时非常方便。

（二）与模板的良好交互

在 Vue 模板中，ref 创建的数据可以很好地与模板语法融合。虽然在模板中访问 ref 数据时不需要显示地使用

1. .value

复制代码

（Vue 会自动处理），但这种自动处理机制使得开发者可以轻松地将 ref 数据绑定到模板元素。比如，将

1. count

复制代码

绑定到一个按钮的点击事件和显示文本：

1. <template>
   
2.   <button @click="count.value++">{{ count }}</button>
   
3. </template>

复制代码

这使得开发简单的交互组件变得快捷，尤其是那些只涉及基本数据类型的组件。

（三）适合处理复杂组件中的局部数据

在大型复杂组件中，可能存在很多局部的、小型的响应式数据。ref 可以很好地处理这些情况，因为每个 ref 都是独立的个体。例如，一个组件中有多个按钮，每个按钮有自己的点击计数，使用 ref 可以清晰地管理这些独立的计数数据。

二、computed的独特价值


（一）基于已有响应式数据的计算

computed 是用于创建基于已有响应式数据的计算属性。它会根据其依赖的数据自动缓存计算结果。当依赖的数据没有发生变化时，computed 属性会直接返回缓存值，而不会重新计算，这大大提高了性能。

1. import { ref, computed } from 'vue';
   
2. const count = ref(0);
   
3. const doubleCount = computed(() => count.value * 2);

复制代码

在这个例子中，

1. doubleCount

复制代码

会根据

1. count

复制代码

的值自动计算，并且在

1. count

复制代码

不变时，不会重复执行计算函数。这种特性在处理复杂的计算逻辑，特别是那些依赖于多个响应式数据的计算时非常有用。

（二）在模板中的高效使用

在 Vue 模板中，computed 属性可以像普通属性一样使用。这使得模板代码更加简洁和易读。例如，如果我们要在模板中显示一个根据其他数据计算得到的格式化字符串：

1. <template>
   
2.   <div>{{ doubleCount }}</div>
   
3. </template>

复制代码

这种简洁的使用方式使得开发人员可以在模板中方便地展示复杂计算的结果，而不需要在模板中嵌入大量的计算逻辑代码。

（三）支持 setter 方法实现双向数据绑定

computed 属性还可以定义 setter 方法，从而实现双向数据绑定。这在某些需要对计算结果进行反向更新的场景中非常有用。例如：

1. const fullName = computed({
   
2.   get() {
   
3.     return firstName.value + ' ' + lastName.value;
   
4.   },
   
5.   set(newValue) {
   
6.     const names = newValue.split(' ');
   
7.     firstName.value = names[0];
   
8.     lastName.value = names[1];
   
9.   }
   
10. });

复制代码

这使得 computed 不仅仅是一个单向的计算属性，更具有了灵活的数据交互能力。

三、reactive相对少见的原因


（一）理解成本较高

reactive 用于创建复杂的响应式对象，它是基于 ES6 的 Proxy 实现的。对于一些开发者来说，Proxy 的概念相对较新，理解起来可能有一定难度。相比之下，ref 的使用方式更接近传统 JavaScript 中变量的使用。例如：

1. import { reactive } from 'vue';
   
2. const state = reactive({
   
3.   count: 0,
   
4.   name: 'John'
   
5. });

复制代码

在使用

1. state.count

复制代码

或

1. state.name

复制代码

时，虽然在模板中可以直接使用，但在 JavaScript 代码中需要时刻记住这是一个基于 Proxy 的对象，这种潜在的复杂性可能会让开发者在一些简单场景下选择更易懂的 ref。

（二）使用场景的局限性

reactive 主要用于处理复杂的对象结构，当应用场景只涉及简单的数据类型或者小型的数据结构时，使用 reactive 就显得有些“大材小用”。例如，如果只是需要一个简单的计数器，使用 ref 会更加合适。而且在处理函数参数传递等情况时，如果只需要传递基本数据类型的响应式数据，ref 也更加方便。

（三）与一些外部库的兼容性问题

在某些情况下，reactive 创建的响应式对象可能与一些第三方 JavaScript 库存在兼容性问题。由于这些库可能没有考虑到 Vue 的 reactive 机制，在数据交互过程中可能会出现意想不到的问题。而 ref 和 computed 在与外部库交互时，由于其相对简单的机制，出现兼容性问题的概率相对较低。
虽然 reactive 在 Vue 的响应式系统中有着重要的地位，但由于上述原因，在实际开发中，我们会发现 ref 和 computed 的使用频率在很多场景下会高于 reactive。然而，这并不意味着 reactive 不重要，在处理复杂的对象级别的响应式需求时，它仍然是不可或缺的工具。开发者需要根据具体的项目需求和场景，合理选择使用这些 Vue 提供的响应式 API。
到此这篇关于Vue中ref、computed与reactive使用频率现象分析的文章就介绍到这了,更多相关Vue ref computed reactive使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3312475jg.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！