Vue2源码解析实现—Vue响应式实现（对data中数组进行劫持）_oldarrayprotomethods 数组 js vue2-优快云博客

本文链接：https://blog.youkuaiyun.com/HAI_GUI/article/details/129820501

文章详细介绍了在Vue2中如何通过重写数组方法实现对data中数组的劫持，以达到响应式的效果。在arrMethods.js中，作者重写了如push、pop等数组方法，然后在Observer类的构造函数中，根据数据类型判断是对象还是数组，对数组使用这些重写的方法进行劫持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2源码解析实现

对data中数组进行劫持

在上一个文章中写到对data中的对象属性进行劫持，接着后面实现对data中的数组进行劫持
文章地址：Vue2源码解析实现—Vue响应式实现（对data中对象的属性劫持）

实现原理
- 对数组进行重写，利用方法函数劫持，劫持数组的方法
  在observer文件夹中创建一个arrMethods.js ,在文件中重写数组方法，进行劫持

//! 重写数组方法，进行数组函数劫持

// 获取原来的数组方法
let oldArrayProtoMethods = Array.prototype;

export let ArrMethods = Object.create(oldArrayProtoMethods);

let methods = ["push", "pop", "unshift", "shift", "splice"];

methods.forEach((item) => {
  ArrMethods[item] = function (...args) {
    console.log("劫持数组");
    let result = oldArrayProtoMethods[item].apply(this, args);
    return result;
  };
});

在Observer劫持函数中需要判断data中是对象还是数组，如果是对象就通过Object.defineProperty进行劫持，如果是数组，就用重写的数组方法进行劫持

import { ArrMethods } from "./arrMethods";
class Observer {
  constructor(value) {
    //> 判断数据
    if (Array.isArray(value)) {
      console.log("数组");
      value.__proto__ = ArrMethods; // 这里就是重写的数组方法
    } else {
      this.walk(value); //> 进行遍历 让每一个属性都劫持到
    }
  }
  walk(data) {
    let keys = Object.keys(data); //> keys 是对象所有的属性
    for (let i = 0; i < keys.length; i++) {
      //> 对我们每一个属性进行劫持
      const key = keys[i];
      const value = data[key];
      //   console.log(value);
      defineReactive(data, key, value);
    }
  }
}