Vue 2和Vue 3响应式原理大揭秘！从Object.defineProperty到Proxy的进化之路

本文链接：https://blog.csdn.net/razyliang/article/details/151181606

如果你正在学习Vue，或者对Vue 2升级Vue 3有点犹豫，这篇内容绝对能帮到你！

不知道你有没有遇到过这样的情况：在Vue 2里给对象新增属性，页面居然不更新？或者操作数组时，有些方法就是不生效？别急，这都是Vue 2响应式系统的"小脾气"。

而Vue 3用全新的Proxy方案解决了这些问题，今天我就带大家看看这两代响应式系统到底有什么不同，以及我们在使用时需要注意哪些坑。

Vue 2的响应式原理：Object.defineProperty

先来看看Vue 2的做法。它用的是ES5的Object.defineProperty方法，给对象的每个属性都加上getter和setter。

这么说可能有点抽象，咱们看段代码就明白了：

// 简化版的Vue 2响应式实现
function defineReactive(obj, key, val) {
  // 递归处理嵌套对象
  observe(val);
  
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取了${key}属性：${val}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`设置了${key}属性：${newVal}`);
        val = newVal;
        // 这里会通知依赖更新
      }
    }
  });
}

// 遍历对象的所有属性
function observe(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return;
  }
  
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key]);
  });
}

// 测试一下
const data = { name: '小明', age: 18 };
observe(data);

data.name; // 控制台输出：读取了name属性：小明
data.age = 20; // 控制台输出：设置了age属性：20

看到没？Vue 2在初始化时遍历对象的所有属性，给每个属性都加上getter和setter。当你读取属性时，getter会被调用；当你修改属性时，setter会被调用，这时候Vue就知道数据变了，该更新视图了。

Vue 2的局限性

但是这种方法有几个明显的缺点：

无法检测对象属性的添加或删除：因为defineProperty只能在已有的属性上设置getter/setter

const data = { name: '小明' };
observe(data);

data.age = 18; // 新增属性，无法被检测到
delete data.name; // 删除属性，也无法被检测到

数组操作的限制：Vue 2只能拦截数组的7个变更方法（push、pop、shift、unshift、splice、sort、reverse）

const arr = [1, 2, 3];
observe(arr);

arr.push(4); // 能被检测到
arr[0] = 100; // 直接通过索引修改，无法被检测到
arr.length = 0; // 修改length属性，也无法被检测到

性能问题：需要递归遍历整个对象，对大型对象不太友好

正因为有这些限制，我们在Vue 2中经常要用Vue.set或this.$set来给对象添加新属性，用数组的变更方法来操作数组。

Vue 3的响应式原理：Proxy

到了Vue 3，响应式系统全面升级，用ES6的Proxy重写了。Proxy可以理解为对象的"代理器"，它能在对象的各种操作上设置"拦截器"。

来看看Proxy是怎么工作的：

// 简化版的Vue 3响应式实现
function reactive(obj) {
  // 如果不是对象，直接返回
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  
  // 创建代理对象
  const observed = new Proxy(obj, {
    get(target, key, receiver) {
      console.log(`读取了${key}属性：${target[key]}`);
      // 递归处理嵌套对象
      return typeof target[key] === 'object' ? reactive(target[key]) : target[key];
    },
    set(target, key, value, receiver) {
      console.log(`设置了${key}属性：${value}`);
      target[key] = value;
      // 这里会通知依赖更新
      return true;
    },
    deleteProperty(target, key) {
      console.log(`删除了${key}属性`);
      delete target[key];
      // 这里会通知依赖更新
      return true;
    }
  });
  
  return observed;
}

// 测试一下
const data = reactive({ name: '小明', age: 18 });

data.name; // 读取了name属性：小明
data.age = 20; // 设置了age属性：20
data.gender = '男'; // 设置了gender属性：男（新增属性也能检测到！）
delete data.age; // 删除了age属性

是不是很强大？Proxy不需要遍历所有属性，而是直接代理整个对象，任何操作都逃不过它的"法眼"。

Proxy的优势

全面拦截：不仅能拦截属性读写，还能拦截删除、in操作符等

const data = reactive({ name: '小明' });

// 所有这些操作都能被拦截
data.age = 18; // 新增属性
delete data.name; // 删除属性
'name' in data; // in操作符
Object.keys(data); // 获取所有key

更好的数组支持：直接通过索引修改也能被检测到

const arr = reactive([1, 2, 3]);

arr[0] = 100; // 能被检测到！
arr.length = 0; // 也能被检测到！

性能更好：不需要初始化时递归遍历所有属性，而是按需代理
支持更多数据结构：如Map、Set、WeakMap、WeakSet等

实战中的注意事项

虽然Vue 3的响应式系统更强大，但我们在实际开发中还是要注意一些细节：

1. 响应式丢失问题

有时候我们会不小心"丢失"响应性，比如解构赋值：

const state = reactive({ count: 0 });

// 这样会丢失响应性！
let { count } = state;
count++; // 不会触发更新

// 应该使用toRefs
import { toRefs } from 'vue';
let { count } = toRefs(state);
count.value++; // 这样才会触发更新

2. 原始值响应式

Vue 3提供了ref函数来处理原始值的响应式：

import { ref } from 'vue';

const count = ref(0); // 现在count是响应式的了
count.value++; // 需要通过.value访问和修改

3. 深层响应式与浅层响应式

Vue 3提供了reactive和shallowReactive两种方式：

import { reactive, shallowReactive } from 'vue';

// 深层响应式：所有嵌套属性都是响应式的
const deep = reactive({ 
  nested: { 
    count: 0 
  } 
});

// 浅层响应式：只有第一层属性是响应式的
const shallow = shallowReactive({ 
  nested: { 
    count: 0 
  } 
});