请谈谈 Vue 中的响应式原理，如何实现？

一、Vue2响应式原理：Object.defineProperty的利与弊

实现原理：

// 数据劫持核心实现
function defineReactive(obj, key, val) {
  const dep = new Dep(); // 依赖收集容器
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) { // 当前Watcher实例
        dep.addSub(Dep.target); // 收集依赖
      }
      return val;
    },
    set(newVal) {
      if (val === newVal) return;
      val = newVal;
      dep.notify(); // 触发更新
    }
  });
}

// 遍历对象属性实现响应式
function observe(data) {
  Object.keys(data).forEach(key => {
    defineReactive(data, key, data[key]);
  });
}

// 使用示例
const data = { count: 0 };
observe(data);

典型问题：

1. 无法检测新增属性：

data.newProp = 'test'; // 不会触发更新
// 必须使用 Vue.set(data, 'newProp', 'test')

1. 数组操作需要特殊处理：

// 直接修改数组下标无效
data.arr[0] = 1; // 不触发更新
// 必须使用变异方法：push/pop/splice等
data.arr.splice(0, 1, 1);