ref和reactive有什么区别？今天必须曝光它！！

 哈喽大家好，我是程序媛小李，今天，我必须要跟大家把这个事情说清楚！真真实实的踩坑日记啊！！

先看几张图

1、

2、

3、

const tableData = ref ([
{
    A:'1',
    B: '2',
    C: '3',
    D: '',
...
  },
{
    a:'4',
    b: '5',
    c: '6',
    d: '',
...
  },
...


])

看了上面的图片和代码，大家觉得有什么问题？

相信有着8年开发经验的大家，肯定一眼就看出来了吧。

如果还没有看出来问题，再来给大家看三张图片

4、

5、

6、

const tableData = reactive ([
{
    A:'1',
    B: '2',
    C: '3',
    D: '',
...
  },
{
    a:'4',
    b: '5',
    c: '6',
    d: '',
...
  },
...


])

怎么样，现在你看出来问题了吗？

如果你现在还没有看出来，那么恭喜你，下一个踩这个坑的人就是你了！

很明显，两种情况下，我分别使用ref 和reactive来定义同一个数组，为什么第一种情况下图1和图2中的方法标红了呢？

既然标红了，说明不支持这种写法，为什么？同样都是声明响应式的方法，两者差距竟如此之大。

把这个问题改完之后，小李赶紧去社区“一探究竟”，搞懂之后，必须写篇文章给大家讲清楚！

ref 声明的响应式变量

1. 基本用法：ref 通常用于基本数据类型（如字符串、数字、布尔值等）以及对象或数组的引用。当你使用 ref 包装一个值时，Vue 会返回一个响应式的、可变的引用对象，其 .value 属性指向被包装的值。

2. 模板中的解包：在模板中，Vue 会自动解包 ref 的 .value 属性，因此你不需要显式地访问 .value。但在 JavaScript 代码中，你需要访问 .value 来获取或设置值。

3. 响应式转换：对于对象或数组，ref 实际上是在内部使用 reactive 来使其响应式，但返回的是一个包含 .value 属性的对象。

4. 不支持数组方法：因为 ref 返回的是一个对象，而不是直接的数组或基本类型，所以你不能直接在 ref 返回的对象上使用数组的方法如 forEach 或 filter。你需要先访问 .value 属性，然后在这个数组上调用这些方法。

reactive 声明的响应式变量

1. 基本用法：reactive 用于创建响应式的对象或数组。它直接返回传入的对象或数组，并使其响应式。

2. 模板中的使用：在模板中，你可以直接使用 reactive 创建的对象或数组，无需任何额外的属性访问。

3. 直接操作：因为 reactive 返回的是对象或数组本身，所以你可以直接在这些对象或数组上使用如 forEach、filter 等方法。

为什么 ref 声明的响应式遍历不支持 forEach 和 filter 方法？

ref 返回的是一个包含 .value 属性的对象，而不是直接返回数组或对象本身。这意味着当你尝试在 ref 返回的对象上调用 forEach 或 filter 等方法时，实际上是在尝试在一个普通对象上调用这些方法，而普通对象并不具备这些方法。

现在大家知道是什么原因了吧！原来它俩的返回值不一样呀！

好啦！今天的分享就到这里！如果本文的分享对你有帮助的话，欢迎给个一键三连哦~大家的支持是我坚持创作的动力！感谢大家~

我是小李，祝大家周末愉快，我们下期见~