深入剖析 Vue 双向数据绑定机制 —— 从响应式原理到 v-model 实现全解析

双向数据绑定是 Vue 的核心特性之一，它让数据与视图始终保持同步

下面探究 Vue 内部响应式系统的实现原理、依赖收集和更新派发过程，以及 v-model 如何将这些底层机制封装为语法糖。

一、双向数据绑定的基本思路

双向数据绑定主要依赖两个过程：

1. 数据劫持：拦截数据的读取和修改操作，实现依赖收集（dependency tracking）。
2. 自动更新：当数据发生变化时，自动通知所有依赖该数据的视图进行更新。

在 Vue 中，这一机制依托于响应式系统，它保证了数据变化时能够高效触发局部或全局的 DOM 更新。

二、Vue 2 的响应式实现 —— 基于 Object.defineProperty

Vue 2 采用 Object.defineProperty 对每个属性进行劫持，将普通对象转为响应式对象。这种方式主要包括以下步骤：

2.1 数据劫持与 defineReactive

在 Vue 2 中，每个数据属性会经过一个类似于 defineReactive 的过程，该函数为每个属性创建了 getter 与 setter，从而实现依赖收集和派发更新。

function defineReactive(obj, key, val) {
  // 为每个属性创建一个依赖收集器
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get()