Vue3.x 中 shallowReactive 响应式问题

向大家请教一下 vue3.x 中 shallowReactive 问题,先在此谢谢大家啦。。:slight_smile:

第一种情况:通过事件改变数据

<template>
  <p>{{ person }}</p>
  <button @click="handleClick">点击</button>
</template>
setup() {
  const person = shallowReactive({
    name: 'sjw',
    brother: {
      name: 'hlh'
    },
  })

  function handleClick() {
    person.brother.name = 'zlz'
    console.log(person.brother.name)
  }

  return { person, handleClick }
}

结果:
image

数据发生改变,但视图没有更新(因为 shallowReactive 只转换对象的第一层为响应式数据)

第二种情况:

<template>
  <p>{{ person }}</p>
</template>
setup() {
  const person = shallowReactive({
    name: 'sjw',
    brother: {
      name: 'hlh'
    },
  })

  person.brother.name = 'zlz'
  console.log(person.brother.name)

  return { person }
},

结果:
image

数据发生变化,页面也会更新,这是为什么???

问题: 文档说 shallowReactive 只会转换对象的第一层为响应式数据,为什么采用在第二种情况中更改数据时会触发页面的更新??,大家知道是为什么吗??

第二种方式,你是改完了,才交给模板的。

还有其他方式,
比如,第一种方法,

function handleClick() {
    person.name = '随便写点啥'
    person.brother.name = 'zlz'
    console.log(person.brother.name)
  }

然后你会发现 模板里面的 person.brother.name 也变了。

或者定义一个新的 reactive ,在 handleClick 里面改这个新的,和 person.brother.name = ‘zlz’ 。
然后你会发现,模板里面的 person.brother.name 也更新了。

所以,不用大惊小怪的。

1 Like