Vue 2 源码探秘:数组拦截实现的底层原理

在 Vue2 中,数组的响应式拦截主要通过 ​​重写数组的变异方法​ ​ 和 ​​动态代理​​ 实现。以下是其核心机制和实现方式:


一、重写数组的变异方法(核心机制)

Vue2 通过劫持数组的 ​​7 个变异方法​ ​(pushpopshiftunshiftsplicesortreverse),使得这些方法在操作数组时能够触发视图更新。具体实现步骤如下:

  1. ​创建代理方法对象​

    Vue2 会创建一个新的对象 arrayMethods,继承自 Array.prototype,并重写上述 7 个方法。例如:

    ini 复制代码
    const arrayProto = Array.prototype;
    const arrayMethods = Object.create(arrayProto);
    const methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
    
    methodsToPatch.forEach(method => {
      const original = arrayProto[method];
      arrayMethods[method] = function(...args) {
        const result = original.apply(this, args);
        // 触发依赖更新
        this.__ob__.dep.notify();
        return result;
      };
    });
  2. ​替换数组的原型​

    当数组被声明为响应式数据时,Vue2 会将其原型指向 arrayMethods,从而拦截对变异方法的调用:

    ini 复制代码
    if (Array.isArray(value)) {
      value.__proto__ = arrayMethods; // 替换原型
    }
  3. ​处理新增元素的响应式​

    对于 pushunshiftsplice 等可能新增元素的方法,Vue2 会递归调用 observe 方法,使新增元素也变为响应式:

    ini 复制代码
    if (method === 'push' || method === 'unshift') {
      inserted = args; // 新增的元素
    } else if (method === 'splice') {
      inserted = args.slice(2); // splice 的第3个参数及之后为新增元素
    }
    if (inserted) observeArray(inserted); // 递归劫持新元素

二、动态代理与 Vue.set

对于 ​​直接通过索引修改数组元素​ ​ 或 ​​修改数组长度​​ 的操作,Vue2 提供了以下解决方案:

  1. Vue.setvm.$set

    通过显式调用 Vue.set(target, key, value),可以强制触发响应式更新:

    kotlin 复制代码
    this.$set(this.list, index, newValue); // 替换指定索引的值
  2. splice 方法的替代性使用​

    通过 splice 方法修改数组元素,例如:

    kotlin 复制代码
    this.list.splice(index, 1, newValue); // 替换索引为 `index` 的元素

三、限制与注意事项

  1. ​非变异方法无法触发更新​

    filterconcatslice 等不会改变原数组的方法,需手动替换数组引用:

    kotlin 复制代码
    this.list = this.list.filter(item => item.id > 0); // 替换整个数组
  2. ​直接修改索引或长度的局限性​

    直接操作 arr[0] = valuearr.length = 0 不会触发响应式,必须通过变异方法或 Vue.set 实现。


四、源码实现示例

以下是 Vue2 中数组拦截的简化源码逻辑:

ini 复制代码
// 1. 保存原生数组原型
const arrayProto = Array.prototype;

// 2. 创建代理方法对象
const arrayMethods = Object.create(arrayProto);

// 3. 重写变异方法
methodsToPatch.forEach(method => {
  const original = arrayProto[method];
  arrayMethods[method] = function(...args) {
    const result = original.apply(this, args);
    // 触发更新
    this.__ob__.dep.notify();
    return result;
  };
});

// 4. 替换数组原型
function observeArray(arr) {
  arr.__proto__ = arrayMethods;
  arr.forEach(item => observe(item)); // 递归劫持子元素
}

五、总结

Vue2 通过 ​​重写数组的变异方法​ ​ 实现对数组的拦截,同时结合 Vue.setsplice 方法解决索引修改的响应式问题。开发者需注意避免直接操作索引或长度,并优先使用变异方法或 Vue.set 以确保响应式更新。对于复杂场景,Vue3 的 Proxy 提供了更全面的解决方案。

相关推荐
paopaokaka_luck19 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js