Vue3 中的 shallowReactive, shallowReadonly, toRaw, getCurrentScope 解释

本文将详细解释 Vue3 中的 shallowReactive, shallowReadonly, toRaw, getCurrentScope 函数的含义和用法，并用大白话说明它们在实际开发中的作用。

1. shallowReactive

shallowReactive 是 Vue 3 中用于创建一个浅层响应式对象的函数。简单来说，浅层响应式对象只会对对象自身的属性进行响应式处理，而不会对嵌套的属性进行响应式处理。

举个例子：

const obj = { name: 'John', age: 30, address: { city: 'New York', street: 'Main Street' } };
const shallowReactiveObj = shallowReactive(obj);

// 改变 name 属性会触发响应式更新
shallowReactiveObj.name = 'Jane';

// 改变 address.city 属性不会触发响应式更新
shallowReactiveObj.address.city = 'Los Angeles';

2. shallowReadonly

shallowReadonly 是 Vue 3 中用于创建一个浅层只读对象的函数。浅层只读对象只允许对对象自身的属性进行读取，而不允许修改或删除。

举个例子：

const obj = { name: 'John', age: 30 };
const shallowReadonlyObj = shallowReadonly(obj);

// 尝试修改 name 属性会报错
shallowReadonlyObj.name = 'Jane'; // 报错

// 可以读取 name 属性
console.log(shallowReadonlyObj.name); // 输出: John

3. toRaw

toRaw 是一个函数，用于获取一个响应式对象的原始对象。如果你有一个被包装为响应式对象的对象，你可以使用 toRaw 来获取它的原始对象，这样就可以绕过响应式系统对它的处理。

举个例子：

const obj = { name: 'John', age: 30 };
const reactiveObj = reactive(obj);
const rawObj = toRaw(reactiveObj);

// rawObj 是 obj 的原始对象，不再是响应式对象
console.log(rawObj.name); // 输出: John

4. getCurrentScope

getCurrentScope 是一个函数，用于获取当前正在执行的组件的作用域实例。在 Vue 3 中，组件的实例被称为作用域实例，通过 getCurrentScope 函数，你可以获取到当前正在执行的组件的实例，以便进行一些操作或访问组件的属性或方法。

举个例子：

const component = {  setup() {  const scope = getCurrentScope();  console.log(scope); // 打印当前组件的作用域实例  } }

通过以上解释，相信你已经对 shallowReactive, shallowReadonly, toRaw, getCurrentScope 有了更深入的理解。在实际开发中，你可以根据需要选择合适的函数来操作响应式对象，提高代码的效率和可维护性。

Vue3 中的 shallowReactive, shallowReadonly, toRaw, getCurrentScope 解释