javascript - 如何在不失去 react 性的情况下更新 react 性对象(vue 3 组合 API)

Question

我尝试更新 react 性对象，但 react 性丢失。

如何解决这个问题？

const obj = reactive({ id:0 , name: "Tom" })


const updateObj = { id:1 , name: "Bob" }

Object.keys(updateObj).forEach(key => {
   obj[key] = updateObj[key]
 })


console.log( isRef( obj.id ) )  // => false

Answer 1

实际上，当涉及到 react 性时，您的示例应该有效。与其迭代键，简单地使用 Object.assign(obj, updateObj) 可能是一个更好的主意，但您的方法也应该有效。

但是，您似乎对 react 性和 isRef 函数有一个轻微的误解:isRef 不会检查给定的参数是否是 react 性的，而是特别检查它是否是一个ref 对象(请参阅 Vue 文档中的 this section)。还有一个名为 isReactive 的函数，可以专门检查对象是否是 reactive 对象(请参阅 here )。请注意，对于响应式(Reactive)对象的属性，这也不会返回 true。

我创建了一个 small example ，这应该说明两种方法之间的区别。它还表明，即使 isRef 和 isReactive 函数都返回 false， react 性仍然有效:

<script setup>
import { computed, reactive, ref, isReactive, isRef } from 'vue';
  
const obj = reactive({ id: 0 , name: "Tom" })
const realRef = ref('foo')

const isRefOrReactive = computed(() => ({
  objRef: isRef(obj),
  objReactive: isReactive(obj),
  objIdRef: isRef(obj.id),
  objIdReactive: isReactive(obj.id),
  refRef: isRef(realRef),
  refReactive: isReactive(realRef)
}))

const updateObject = () => {
  const updateObj = { id: 1 , name: "Bob" }
  Object.keys(updateObj).forEach(key => {
    obj[key] = updateObj[key]
  })
  // Object.assign(obj, updatedObj)
}
</script>

<template>
  <pre>{{ obj }}</pre>
  <pre>{{ obj.name }}</pre>
  <pre>{{ isRefOrReactive }}</pre>
  <button @click="updateObject">
    Swap data
  </button>
</template>