Subscribe on changes!

shallowReactive在同时改变深层次和浅层次的属性时都会得到响应

avatar
Mar 11th 2022

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

const shallowObj = shallowReactive({ name: '花花', age: { bar: { age: 18 } } })

const changeShallowObj = () => { shallowObj.name = 'follow' shallowObj.age.bar.age = 22 }

const changeShallowObj1 = () => { shallowObj.age.bar.age = 1 } 在点击changeShallowObj时都会得到响应后的结果,触发dom更新. 只是单个深层次则不会响应

What is expected?

只响应浅层次

What is actually happening?

浅层次和深层次都发生了响应

avatar
Mar 11th 2022

I guess I understand the problem from google translate ... this is totally expected behavior.

  • only a change of top-level properties triggers a re-render.
  • but when the render happens, the whole content of shallowObj is used to update the DOM, so also unreactive changes (age.bar.age) will be part of the update.

(google translate)

(我认为我从谷歌翻译中理解了这个问题)

这是正常行为。

  • 只有顶级属性的更改才会触发重新渲染。
  • 但是当渲染发生时,shallowObj 的全部内容用于更新 DOM,因此非反应性更改(age.bar.age)也将成为更新的一部分。