Vue version

3.2.45

Link to minimal reproduction

https://play.vuejs.org/#__DEV__eNqNU8tu2zAQ/JWtLnGASEqb9uI6QfrIIUXhFk5604WR1jZTiiTIleTA8L93KfqhOG3Qm7iPmdmd1Tr5ZG3WNpiMk4kvnbQEHqmxoIReXBYJ+SK5KrSsrXEEa3A4hw3MnanhhNtOCl3o0mhPoE0Hl6Cxg6+CcHT6cZC4IxdypsvIfDelUHgva+So1Iu+stB5DlNDjC9Kki1CK5wUDwoLrZCAYnkE4Y9dy+xleSTdNsxY7mUQPYp9kWveaO4yGsolT9lrGZ2OoTWygnWhAbbCsQup46mO0ltZ8fGv+WA4wb5vmGClWStUs6U7VGyCYvbkVhM6rhgdRJ/B2/Pz84A/yaN5bBU/CGurWC6/ACZv0hRu2dalaVQFQnXiyYdXB7REkFqSFIoXyNwZpGlssldT041hvd4L32wmue3xt5i/bMUcFWCL7omvhrdSAZketWycQx1tOAIdsRu87ANy8GgHPsn32pOzJF5dWgubPXqj+UZ7d4ptgk+TcUIkxPgaw7tIlkTWj/O8rDS3Vahk6zKNlGtb59dclrtGB+60MvX1RfYue/8hr6SnYTxDX6cPznQeHaMUydmAJ+cgD53yiBU6dP/Le9T2jPso94I/0PMpbHgt5HnVc7k4WkppaisVuh823Pbz5QilTPetj5FrcD9MucTy91/ij34Vh/rpsFc2WAAJt0CK6Zu7Ka74e5+sTdXwX/hacobeqCZojGWfG12x7EFdr/a295h/oHt/syLUfjdUENpvo6/vDfnyyugHuRfZxX6Lmz+07bNl

Steps to reproduce

1. npm init vue@latest

2. npm install

3. npm run dev

What is expected?

timeStr is fixed at the initial value, only timeStrRef is updated once every second.

What is actually happening?

timeStr not defined by ref() is also updated.

System Info

No response

Any additional comments?

When I ran the sample code posted in the book, the behavior did not match.
The version at the book was 3.2.37 and my environment was latest (3.3.4). After looking at the versions where the behavior changed, I found that the behavior was correct until 3.2.44, and that the change in 3.2.45 was the problem.

- timeStr = newTimeStr;

@Shyam-Chen I also understand that the proposed fix will result in the desired behavior. What I would like to confirm is whether the change to make non-ref() variables behave reactively was intentional, or whether this was caused by some side effect.

When a reactive Effect triggers a re-render, the the whole template is updated with all current data - wether or not that data itself is reactive, doesn't matter.

So yes, this is intentional, it's how updates in virtualDOM-based view libraries, such as Vue and React, work.