vue3 reactive() 的局限性：对解构操作不友好，ref似乎也有这个问题？-灵析社区

因为截至目前， **JS 无法监听变量的赋值行为** ，不管是 `Object.defineProperties` 还是 `Proxy`，其实都是拦截**对象的属性变化** ，而**不是监听变量的赋值** 。 const a = 0; let b = 1; var c = 2; > 👆这里的 `a`、`b`、`c` 都是“变量”，对它们的赋值，是无法监听的。 let obj = { a: 0, b: 1 } let { a } = obj; > 👆这里的 `obj.a`、`obj.b` 都是“对象的属性”，对这些属性的赋值行为可以通过 `Proxy` 或者 > `Object.defineProperties` 拦截到。 > 但是对**`obj`本身**重新赋值的行为，是无法被监听的，同理，对从 `obj` 中解构出来并重新命名为`a`的变量的赋值，也无法被监听。 其实也正是因为变量赋值无法被监听，Vue3 才搞出 `ref` 这个东西来，把基础类型包装进一个对象里，就可以对这个对象的属性`.value`进行监听了。 不过 JS 不能监听，不代表无法实现这样的语义，有一个比较年轻的 Svelte 框架，通过预编译，对用户屏蔽类似的包装过程，所以如果是使用 Svelte 的话，延时器回调中对变量赋值，可以直接反映到视图上： let x = 0; const interval = setInterval(() => { x++; x >= 100 && clearInterval(interval); }, 1e3); Hello world!{x} 但是 Vue 目前不允许这样写。 其实 [Vue 有过一个提案](https://link.segmentfault.com/?enc=QVbOwfyH994pqUGHmMsMWA%3D%3D.lCHziyJ%2FN0R3bXRehISrxaoeKe8MZ5%2FuCgzPogWmHLAh9hGDsbhuw3AUtGDNbtfTrJ%2FO9e5BQc9jXv%2Bu8ogwNg%3D%3D)，用 JS 的 label 语句来代替 `ref` 函数： ref:count = 0; count++ 但是由于这个提案给 label 语句带来了歧义，在 Vue 社区和开发者群体中引起了强烈的反对，因此只得作罢，所以时至今日， Vue 的响应式还是以监听对象属性的方式来完成，对解构而来的变量重新赋值不会被监听。