Vue 3 响应式数据怎么使用 isReactive 检查对象代理-Vue.js-PHP中文网

isReactive 用于判断对象是否由 reactive 或 shallowReactive 创建，只认底层是否为 reactive 代理，不关心是否被 readonly 包裹；对 ref、普通对象、只读原始对象均返回 false。

vue 3 响应式数据怎么使用 isreactive 检查对象代理

isReactive 用于判断一个对象是否由 reactive 或 shallowReactive 创建，它不关心对象是否被只读包裹，只认“底层是不是 reactive 代理”。只要最内层是 reactive 创建的，哪怕外层套了 readonly，isReactive 仍返回 true。

什么时候用 isReactive？

当你需要区分“真正可修改的响应式对象”和普通对象、ref 或只读原始对象时，就该用它。比如在组合式函数里统一处理输入参数，或防止对非 reactive 对象做深层赋值操作。

避免误对普通对象调用 toRaw 或尝试解构响应式行为
在封装通用逻辑（如表单校验、状态合并）前确认数据具备响应式更新能力
配合 isReadonly 判断是否“既响应又不可改”，例如：isReactive(obj) && isReadonly(obj)

常见判断结果对照

理解返回值的关键，在于记住它只看“有没有 reactive 底层”：

shopify-app-react-router

构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G

下载

isReactive(reactive({})) → true
isReactive(readonly(reactive({}))) → true（内层是 reactive）
isReactive(readonly({})) → false（原始对象没被 reactive 过）
isReactive(ref({})) → false（ref 是包装器，不是 reactive 代理）
isReactive({}) → false（纯普通对象）

实际使用示例

在组合函数中安全处理参数：

function useDeepWatch(source) {
  if (isReactive(source)) {
    // 可以放心监听嵌套属性变化，触发依赖收集
    watch(source, (newVal) => { /* ... */ }, { deep: true })
  } else if (isRef(source)) {
    watch(source, (newVal) => { /* ... */ })
  } else {
    console.warn('source 不是响应式对象，无法深度监听')
  }
}

在模板逻辑或脚本中提前校验：

const state = reactive({ count: 0 })
const locked = readonly(reactive({ name: 'admin' }))
<p>console.log(isReactive(state))   // true
console.log(isReactive(locked))  // true
console.log(isReadonly(locked))  // true</p>