Subscribe on changes!

When customizing hooks, the issue of not taking effect when the params is reactive data

avatar
Jun 2nd 2023

Vue version

3.2.47

Link to minimal reproduction

https://play.vuejs.org/#eNqNU71uwyAQfpUTkyNFSdTRdSJ16VipP+pQsVByTV3ZgACniiy/e+/AcZxM9WBj+H6O76AXD86tjh2KUlRB+9pFCBg7B40yh60UMUixk6ZunfURetC2dV3E/RLq8IJKx/qIS/DT6FdF/Q0DfHnbghSkLMU98U1E/6U0wpNqEXppAAyNSgjR1+ZAkGGOeo0qjjD7+VMmVsZIo60JVGVCbCfrKlF2xYWTRmcb2gmGKMWSJwd6DwvSy1JdwDdaJLHCKa/akP0WsN1lkbSpIstlRJIBKI6qKUGZ0wXLD8vaBleNPRRSZMYsL6oCiDiPkIUWXBHTuTz+Tnp7RFdC9B2OK5QDQIbnLRj8fVdNx4GcO1QUqajszlhGe+qtN1M0IyuHwvkmWJbsL6IDyY4hFSn3FQWcJemwvNUt2i6Ofiy9Xuf2MGzF+RNfiseP53QWgNevI9LfdNrwhsQxTTNXYV1qOO9rmiEnKnxseXJMG7vtya3hf72GJdxtNhseVut8X+h20E/E1jV8ANmr2tfHXT8PcKjWPMesGZJ+Qzw1VIe2DvfnOxd04FtHBrxIODH8AV/zOpI=

Steps to reproduce

What is expected?

I expect my params to be also reactive

What is actually happening?

After reassigning state.obj, I used isReactive to see if the object was still a reactive object, but the watch function was not triggered

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-6300HQ CPU @ 2.30GHz
    Memory: 3.91 GB / 11.89 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (113.0.1774.57)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ~3.2.31 => 3.2.31

Any additional comments?

No response

avatar
Jun 3rd 2023

@1020847665 You are watching on state.obj and then assigning it a new value to it. In that case that watcher will not get triggered.

const obj = reactive({
 child: {
   key: 'value'
 }
})

watch(obj, (val) => console.log('watch obj', val), { deep: true })  // triggered
watch(obj.child, (val) => console.log('watch obj.child', val), { deep: true }) // not triggered

obj.child = 'updated'

This is not a bug!

avatar
Jun 6th 2023

but console.log("change state.obj", state.obj, isReactive(state.obj)); isReactive function console.log is true