vue3 中 ref和reactive、shallowRef和shallowReactive，toRaw 和 markRaw的区别

在 Vue 3 中，ref、reactive、shallowRef、shallowReactive 是用于创建响应式数据的方法，而 toRaw 和 markRaw 则是用于处理响应式数据的辅助函数。让我分别解释它们的区别：

1. ref vs reactive:

   • ref：用于创建一个包装了基本数据类型（如数字、字符串等）的响应式引用。它返回一个包含 value 属性的对象，该对象在赋值时会触发视图更新。
   • reactive：用于创建一个包含多个属性的响应式对象。它接收一个普通对象，并返回一个代理对象，这个代理对象会监听对象的属性变化，并在变化时触发视图更新。

2. shallowRef vs shallowReactive:

   • shallowRef：类似于 ref，但是它只对对象的第一层进行响应式处理，不会递归地将其内部属性转换为响应式。
   • shallowReactive：类似于 reactive，但是它只对对象的第一层进行响应式处理，不会递归地将其内部属性转换为响应式。

3. toRaw vs markRaw:

   • toRaw：将一个被 reactive 或 ref 包裹的对象转换为其原始的非响应式版本。这在某些特定情况下非常有用，比如需要将响应式数据传递给不需要响应性的 API。
   • markRaw：标记一个对象，使其在响应式转换过程中不被转换为响应式。这主要用于避免在某些特定对象上进行不必要的响应式处理，提高性能。

下面提供一些示例代码来说明这些概念：

import {
    ref, reactive