概述

vue基于反应性的概念，就像React和Angular一样，使用户体验更好。
VUE中有两种来声明元素的反应状态：ref()和reactive()函数。
在本文中，我们将发现这两个功能及其用例之间的区别。
开始吧！ ðÖ¼

什么是ref()？

ref()是函数，它采用类似参数的参数，并将其包裹在带有.value属性的ref对象中。
这是宣布反应状态的推荐方法。

import { ref } from "vue"

const text = ref("Hello Vue!");

console.log(text) //{ value: "Hello Vue!" }
console.log(text.value) //"Hello Vue!"

要访问状态值，必须在JavaScript模板中使用.value属性，但是如果您必须在组件模板中渲染状态，则不需要.value属性。

<script setup>
import { ref } from "vue"

const text = ref("Hello Vue!");
</script>

<h1>{{ text }}</h1>

为什么要ref()？

为了了解ref()方法的实用性，有必要知道vue在引擎盖下的工作方式。
当它在模板中使用并更改参考值时，VUE立即检测更改并相应地更新DOM，这是通过基于依赖性跟踪的反应性系统使其成为可能的。
在Vanilla JavaScript中，无法跟踪Value的更改，但是可能会使用Getter和Setter方法拦截，何时在对象上。

什么是reactive()？

reactive() api是声明反应状态并使对象本身反应性的另一种方法。

reactive() api创建一个JavaScript代理，并VUE拦截了所有属性的所有突变和访问。

import { reactive } from 'vue';

const state = reactive({ count: 0 });

reactive()的局限性

如前所述，ref()是宣布反应性状态的方式，因为reactive() API有一些局限性：

1. 不能使用原始值：它仅适用于对象类型。

2. 无法替换整个对象：Vue的反应性监视器仅通过属性访问。
   这意味着声明的对象必须保持不变才能不失去反应性。

3. 不建议破坏：有可能以这种方式失去响应能力。

结论

vue提供了两个API，以使状态反应性：ref()和reactive()，并以首选方式推荐了第二个选择的事实。
愉快的编码！