Is useAttrs reactive?

[extrem7]

Documentation says:
Note that although the attrs object here always reflects the latest fallthrough attributes, it isn't reactive (for performance reasons). You cannot use watchers to observe its changes. If you need reactivity, use a prop. Alternatively, you can use onUpdated() to perform side effects with the latest attrs on each update.

But actually is console result of useAttrs call is reactive Proxy(Object). It also works to watch attrs properties via watch. Was it desctibed wrong in documentation or do I miss something?

[baiwusanyu-c]

It is not a reactive object, it is just a proxy object wrapped by proxy.

https://play.vuejs.org/#eNp9ULsOwjAM/BUrS4sErVhRioT4A+YuUTEoUtNEidslyr/jPhED3Wzf2XfnKG7OFUOP4iJkaLx2BAGpd9e608ZZTxDBo2pID3gEHR5LDQle3hrIeDfbuHdr3DIvyrEZTzPc2C4QmPCGaruWR3WBczrMqG2xaO07/yrkTD8wKsvZFzvihtC4VhFyByAnPf2ssoaL7BrjqFEoSElO8jNLd64nGE7GPrGtajFxasGgLLd74ihWw3u/6APeiHzY+cUaV408Dryu5P+jTtSfsCJ9ABtCke8=

[edison1105]

If I understand you correctly, in your demo I linked above you are saying that the disabledAttr computed is not re-computed as a direct result of the disabled attribute being changing. Instead, when the disabled attribute changes the component is re-rendered and because disabledAttr is referenced in the template it will be called and the latest value of the disabled attribute will be retrieved just like "an ordinary function call." This is why clicking the "change" button results in the preview updating.

This understanding is correct.
When the button is clicked, the following events occur in order:

1. The disabled changes.
2. The Comp.vue component is re-rendered, which means the render function is executed again.
3. The render function accesses the disabledAttr.
4. The log within disabledAttr is printed, returning the latest value.
5. The updated value is reflected on the page.

then please explain why the console log in disabledAttr gets logged but the console log in myComputed does not.

The computed has an internal dirty flag that indicates whether the computed value needs to be recomputed.

• When the data that the computed property depends on changes, the dirty flag is marked as true, indicating that the computed value needs to be recomputed the next time it is accessed.
• After recomputation, the dirty flag is set to false, indicating that the computed value does not need to be recomputed the next time it is accessed.
  In your case, the myComputed depends on the nonReactiveObject, which has not been modified. Therefore, the dirty flag of myComputed remains false, and it will not be recomputed duration re-render. As a result, the log will not be printed.

Look at this code again

const attrs = useAttrs()
const disabledAttr = computed(() =>{
 console.log('disabledAttr computed changed')
 return attrs['disabled']
})

When the button is clicked:

1. disabled changes.
2. The dirty of disabledAttr becomes true, indicating that it needs to be recalculated on the next access.

To summarize, the entire update process is as follows:

1. disabled changes.
2. The dirty of disabledAttr becomes true, indicating that it needs to be recalculated on the next access.
3. The Comp.vue component is re-rendered, which means the render function is executed again.
4. The render function accesses the disabledAttr.
5. The log within disabledAttr is printed, returning the latest value.
6. The updated value is reflected on the page.

"an ordinary function call."

I say this to make it easier for you to understand, because the input parameter of computed is a function.

[GhageJohnson]

This is incorrect and not how computeds work. What you stated about the update process is only true for reactive objects. This is why computeds depend on reactive objects. You should review the demo again with this new understanding so that you can understand what it is demonstrating.

Also, please read @liulinboyi's comment above. It confirms that everything I have said in this message and previously is correct. It explains the trigger(instance, "set", "$attrs") behavior I have been trying to explain to you since earlier in this thread. It has screenshots pointing to the same lines of code I pointed to in order to explain this behavior. It appears to me that their comment agrees with my explanation. I am hopeful that this will allow us to move past this misalignment and discuss the original purpose of this discussion as I stated above.

[liulinboyi]

@GhageJohnson The attrs is not reactive but the attrs have some reactive behavior, it's not fully controlled for you, you can't control it directly, you can only control it indirectly, the real control of trigger it or not is the following code:

[edison1105]

OK，I got the point, sorry for misreading the context. 🥲🥲🥲

[GhageJohnson]

Not to worry, @edison1105. Thank you for your effort in assisting me with this problem and working through it with me.

@liulinboyi, thank you as well for the help. I believe I understand your point. I had suspected that was a likely outcome. I think there still might be value in an onAttributesChanged life cycle hook. I will ponder this and consider making a feature request.