请简述 Vue.js 中的响应式原理。

答题要点

Vue.js 的响应式原理基于 JavaScript 的 `Object.defineProperty()` 方法。当一个 Vue 实例创建时，Vue 会遍历 `data` 选项中的所有属性，使用 `Object.defineProperty()` 将这些属性转换为 `getter/setter`。例如，对于一个 `data` 对象 `{ message: 'Hello' }`，Vue 会将 `message` 属性转换为 `getter/setter`。当访问 `message` 属性时，会触发 `getter` 方法；当修改 `message` 属性时，会触发 `setter` 方法。在 `setter` 方法中，Vue 会通知所有依赖该属性的地方进行更新。Vue 内部维护了一个依赖收集系统，每个属性都有一个依赖列表，当属性的值发生变化时，会通知依赖列表中的所有 Watcher 进行更新。Watcher 是一个用于监听数据变化并执行相应操作的对象。当一个组件使用了某个属性时，会创建一个 Watcher 并将其添加到该属性的依赖列表中。当属性的值发生变化时，会通知所有 Watcher 重新计算并更新视图。这样，当 `data` 中的数据发生变化时，Vue 会自动更新与之绑定的 DOM 元素，实现数据的响应式更新。