Vue3 学习 6

其他API

【shallowRef与shallowReactive】

shallowRef

1.作用：创建一个响应式数据，但只对顶层属性进行响应式处理

2.用法：

	let myVar = shallowRef(initialValue);

3.特点：只跟踪引用值的变化，不关心值内部的属性变化
shallowReactive

1.作用：创建浅响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的

2.用法：

	const myObj = shallowReactive（{...}）

3.特点：对象的顶层属性是响应式的，但嵌套对象的属性不是

【readonly与shallowReadonly】

readonly

1.作用：用于创建一个对象的深只读副本

2.用法：

	const original = reactive（{....}）
	const readOnlyCopy = readonly(oringal);

3.特点：

• 对象的所有嵌套属性都将变为只读
• 任何尝试修改这个对象的操作都会被阻止
  4.应用场景：
• 创建不可变的状态快照
• 保护全局状态或配置不可修改

** shallowReadonly**

1.作用：与readonly类似，但只作用于对象的顶层属性

2.用法:

	const original = reactive({...});
	const shallowReadOnlyCopy = shallowReadonly(original);

【toRaw与markRaw】

toRaw

1.作用：用于获取一个响应式对象的原始对象，toRaw返回的对象不再是响应式的，不会触发试图更新

在需要响应式对象传递给非Vue的库或外部系统时，使用toRaw可以确保他们收到的是普通对象

markRaw

1.作用：标记一个对象，使其永远都不会变为响应式的

例如使用mockjs时，为了防止误把mockjs变为响应式对象，可以使用markRaw去标记mockjs

【customRef】

作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行逻辑控制