Subscribe on changes!

关于shallowReactive的问题

avatar
Mar 23rd 2022

Version

3.2.31

Reproduction link

codepen.io

Environment info

C:\Users\19079>vue -V
@vue/cli 5.0.3

C:\Users\19079>vue info

Environment Info:

  System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
  Binaries:
    Node: 16.13.1 - D:\软件\NodeJs\node.EXE
    Yarn: Not Found
    npm: 8.1.2 - D:\软件\NodeJs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.46)
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

What is expected?

预期是 person.name发生改变,person.family.husband.name不改变;

What is actually happening?

当我使用change函数,同时改变一个通过shallowReactive定义的对象的浅层和深层的时候,深层对象也会发生改变。

avatar
Mar 23rd 2022

Vue always updates the whole component when a reactive change happens.

  • the update is cause by the reactive change of person.name.
  • During the update, the changed value for person.family.husband.name is used in the template update.

当发生响应式更改时,Vue 总是更新整个组件。

  • 更新是由 person.name 的被动更改引起的。
  • 在更新期间,person.family.husband.name 的更改值用于模板更新。