Vue 的响应式系统是基于数据劫持和发布订阅模式实现的。当一个普通的 JavaScript 对象传入 Vue 实例作为data
选项时,Vue 会遍历data
的所有属性,并使用Object.defineProperty
或ES6
的Proxy
重写这些属性的getter
和setter
方法。这些属性的getter
和setter
对于用户是不可见的,但是 Vue 可以利用它们来追踪依赖,在属性值被访问和修改时通知变更。
每个组件实例都对应一个watcher
实例,它会在组件渲染的过程中访问过的属性设置为依赖。之后当属性的setter
触发时,会通知watcher
对关联的组件进行重新渲染。在Vue 3.0
中,组件会在首次渲染后跟踪在渲染过程中被访问的属性,当proxy
拦截到set
操作时,该属性将通知所有订阅了它的组件进行重新渲染。
通过这种方式,Vue 可以自动检测数据的变化,并在需要时更新视图,从而实现响应式的用户界面。