Vue3 中 shallowReactive、shallowReadonly、toRaw、getCurrentScope 函数详解及示例

在 Vue 3 中，引入了几个新的 API 函数用于处理和访问响应式数据。以下是对这些函数的简单解释和示例，帮助您理解它们的作用和用法。

1. shallowReactive: 用于创建浅层响应式对象，仅对对象的第一层属性进行响应式处理，不会对嵌套对象进行深层处理。这意味着当嵌套对象发生变化时，不会触发依赖更新。

import { shallowReactive } from 'vue';

const state = shallowReactive({ count: 0 });

console.log(state.count); // 0

// 更新 state.count，不会触发依赖更新
state.count = 1;

console.log(state.count); // 1

// 更新嵌套对象，不会触发依赖更新
state.nested = { value: 2 };

console.log(state.nested.value); // 2

2. shallowReadonly: 用于创建一个只读的浅层响应式对象，可以访问对象的属性但不能修改。同样，只对对象的第一层属性进行响应式处理。

import { shallowReadonly } from 'vue';

const state = shallowReadonly({ count: 0 });

console.log(state.count); // 0

// 尝试修改 state.count，不会生效
state.count = 1;

console.log(state.count); // 0

// 尝试修改嵌套对象，不会生效
state.nested = { value: 2 };

console.log(state.nested); // undefined

3. toRaw: 用于获取一个响应式对象的原始非响应式版本。这在某些情况下很有用，例如在需要对比对象的变化时。

import { reactive, toRaw } from 'vue';

const state = reactive({ count: 0 });

console.log(state.count); // 0

const rawState = toRaw(state);

console.log(rawState.count); // 0

// 修改原始对象，不会触发依赖更新
rawState.count = 1;

console.log(state.count); // 0
console.log(rawState.count); // 1

4. getCurrentScope: 用于获取当前组件实例的作用域对象。作用域对象包含一些有用的属性和方法，例如 emit 和 slots。

import { getCurrentScope } from 'vue';

export default {
  mounted() {
    const scope = getCurrentScope();
    console.log(scope.emit); // emit 方法
    console.log(scope.slots); // slots 对象
  }
}

这些函数在 Vue 3 中引入了新的响应式编程模型，让开发者更方便地处理和访问响应式数据。