shallowReactive没有起效果

Question

shallowReactive没有起效果,用isReactive输出person.name 理论上应该为true

const person = shallowReactive({
  // 只将第一层数据做了响应式处理
  name: '张三',
  age: 18,
  likeFood: {
    fruits: {
      apple: '苹果' // 深层次的数据将会是一个普通的对象
    }
  }
})
onMounted(() => {
//输出后发现是两个false  只输出person为true
  console.log(
    isReactive(person.name),
    '...............',
    isReactive(person.likeFood)
  )

})

Answer 1

根据你的代码，person.name 是一个普通的值，而不是响应式对象，因此 isReactive(person.name) 应该返回 false。而 person.likeFood 是一个对象，因此应该是响应式的，但是由于你使用的是 shallowReactive，它只会对对象的第一层属性进行响应式处理，因此它的深层次的属性 fruits 中的 apple 并没有被响应式处理，所以 isReactive(person.likeFood) 也返回了 false。如果你想要对所有属性进行深层次的响应式处理，可以使用 reactive 代替 shallowReactive。