响应式工具函数

响应式工具函数

在 Vue3 中，我们可以通过组合式 API 来实现依赖注入。组合式 API 是一种更灵活、更强大的编程范式，它允许我们在不修改组件逻辑的情况下，轻松地实现数据共享和状态管理。

响应式 API

以下是对于 Vue 3 中的响应式 API

1. shallowRef(value)

• 创建一个浅层的 ref 响应式对象。

• 它类似于ref，但是在访问和修改引用类型值时不会深层次地进行响应式转换。

2. triggerRef(ref)

• 强制触发一个 ref 的更新。

• 它可以用于手动触发 ref 的更新，而不需要等待响应性依赖自动触发。

3. customRef(factory)

• 创建一个自定义的 ref 响应式对象。

• 它允许你定义 ref 的读取和写入操作的自定义逻辑。你可以在读取或写入时执行额外的操作，例如校验、日志记录等。

4. shallowReactive(target)

• 创建一个浅层次的响应式 Proxy 对象。

• 它类似于reactive，但是在嵌套属性上只会进行浅层次的响应式转换，不会递归地转换嵌套对象。

5. shallowReadonly(target)

• 创建一个浅层次的只读 Proxy 对象。

• 类似于readonly，但只会进行浅层次的只读转换，不会递归地转换嵌套对象。

6. toRaw(observed)

• 返回由reactive或readonly转换过的普通对象。

• 它可以用于获取与 Proxy 对象对应的普通对象，如果你想直接访问原始的未经过 Proxy 包装的数据。

7. markRaw(value)

• 标记一个对象使其永远不会被转换为响应式对象。

• 使用markRaw标记的对象将被视为原始数据，不会响应数据的变化。

8. effectScope()

• 创建一个新的 effect 作用域。

• 它允许你创建一个独立的 effect 作用域来组织和扩展你的副作用函数，可以更好地控制副作用的生命周期。

9. getCurrentScope()

• 获取当前正在运行的 effect 作用域。

• 在 effect 内部，你可以使用getCurrentScope函数来获取当前正在运行的 effect 作用域。

10. onScopeDispose(fn)

• 注册一个在 effect 作用域销毁时调用的回调函数。
• 当 effect 作用域被销毁时，注册的回调函数将会被调用。它可以用于清理副作用产生的资源、取消异步任务等操作。

这些特殊 API 提供了更多的灵活性和控制力，用于处理一些特殊的业务场景和需求。

工具函数

1. isRef(value)

• 检查一个值是否为 ref 响应式对象。

• 它用于判断一个值是否被包装为 ref 对象。

2. unref(ref)

• 取消一个引用类型值的响应式包装。

• 如果传入的值是一个被 ref 包装的响应式对象，则返回其内部的值；如果是普通值，则返回它自身。

3. toRef(object, key)

• 创建一个指定对象的属性的 ref 响应式对象。

• 它创建了一个 ref 对象，使其依赖于源对象的指定属性。

4. toValue(ref)

• 获取 ref 对象的内部值。

• 它可以用于获取一个 ref 对象的内部值，类似于value属性。

5. toRefs(object)

• 将普通对象转换为响应式对象的一组 ref 响应式对象。

• 它可以将普通对象的所有属性转换为 ref 响应式对象，并返回一个包含这些 ref 的新对象。

6. isProxy(value)

• 检查一个值是否为 Proxy 代理对象。

• 它用于判断一个对象是否被转换为 Proxy 代理对象。

7. isReactive(value)

• 检查一个值是否为 reactive 响应式对象。

• 它用于判断一个值是否通过reactive函数转换为 Proxy 代理的 reactive 响应式对象。

8. isReadonly(value)

• 检查一个值是否为只读化的对象。
• 它用于判断一个值是否通过readonly函数转换为只读的 Proxy 代理对象。

这些 API 提供了对响应式数据的更多操作和判断方法。使用这些 API 时，请注意理解其作用和适用场景，并根据实际情况合理使用。