vue页面如何实现响应式

Vue.js 实现响应式的核心机制是利用了 JavaScript 的 `Object.defineProperty` 方法来劫持数据对象的 getter 和 setter，从而在数据变化时能够通知到依赖这些数据的视图进行更新。以下是实现响应式的基本步骤：

1. **数据监听（Data Observation）**：当组件实例被创建时，Vue.js 会遍历 data 对象的所有属性，并使用 `Object.defineProperty` 为每个属性添加 getter 和 setter。在 getter 中收集依赖，在 setter 中触发更新。

2. **依赖收集（Dependency Collection）**：当模板中的数据被读取时（即触发 getter），Vue.js 会将视图中用到这个数据的组件标记为依赖。这样，当数据发生变化时，Vue知道应该通知哪些组件进行更新。

3. **虚拟DOM（Virtual DOM）**：Vue.js 使用虚拟DOM来描述真实的DOM结构。当数据发生变化，视图需要更新时，Vue.js 不会直接操作真实的DOM，而是生成一个新的虚拟DOM树，然后与旧的虚拟DOM树进行比较，找出差异。

4. **DOM更新（DOM Update）**：通过比较找到差异后，Vue.js 只对真正发生变化的部分进行更新，从而最小化了对DOM的操作，提高了性能。

实现响应式的关键代码示意如下：

function defineReactive (obj, key, val) {
    const dep = new Dep()  // Dep是一个依赖收集器

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: false,
        get: function reactiveGetter () {
            const value = val
            if (Dep.target) {
                dep.depend() // 收集依赖
            }
            return value
        },
        set: function reactiveSetter (newVal) {
            const value = val
            if (newVal === value) {
                return
            }
            val = newVal
            dep.notify() // 通知所有依赖进行更新
        }
    })
}