vue3 中 ref、reactive、shallowRef、shallowReactive的区别详解

vue3 中 ref、reactive、shallowRef、shallowReactive的区别

reactive：深度劫持（深监视）
shallowReactive：浅度劫持（浅监视）
ref:深度劫持（深监视），做了reactive的处理
shallowRef：不做监视

readonly 和 shallowReadonly

readonly:只读属性的数据，深度只读
const state2 = readonly(state)
shallowReadonly:只读的数据，浅只读的

toRaw 和 markRaw

toRaw将代理对象变成普通对象,数据变化，界面不会进行更新
const user = toRaw(state);
markRaw标记的对象数据，从此以后都不能在成为代理对象了
const likes = [‘吃’，‘喝’]
state.likes = markRaw(likes)

ref函数

作用：定义一个响应式的数据
语法：const xxx = ref(initValue)

• 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
• JS中操作数据： xxx.value
• 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
  备注：
• 接收的数据可以是：基本类型、也可以是对象类型。
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
• 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

shallowRef函数和shallowReactive 函数

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
使用场景：

• 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化，那就使用 shallowReactive，这样可以做一些性能上的优化
• 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换 那就使用shallowRef

shallowRef和ref的区别在于： ref可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象，但shallowRef定义对象（或数组）类型数据时，它不会通过reactive转为代理对象。