Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

shallowReactive inside a reactive object is not respected when the property is reassigned #5271

sqal opened this issue Jan 16, 2022 · 1 comment


Copy link

sqal commented Jan 16, 2022



Reproduction link

SFC Playground

Steps to reproduce

  • click add
  • click reset
  • click add

What is expected?

I expect the values of the array to always be non-reactive

What is actually happening?

Values inside the array are not reactive only the first time. When a new shallow reactive array is assigned, then its values become reactive.

Copy link

lidlanca commented Jan 17, 2022

when initialized reactive({...}) state, preserved the shallow proxy

  const getData = () => shallowReactive([{ id: 1 }])
  const state = reactive({ data: getData() })

however the data property is part of a reactive object, and when you set that property
with a new shallowReactive object, vue removed the shallow proxy, and made it part of the reactive object.

your expectation to respect shallowReactive, will actually violate the reactive object principles
where *everything is suppose to be deeply reactive. with some exceptions for example objects marked as raw

my recommendation will be not to mix the two.
but if you really need this use case, you can "protect" it with a ref

  const getData = () => shallowRef(shallowReactive([{ id: 1 }]))
  const state = reactive({ data: getData() })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

No branches or pull requests

2 participants