vue2源码重写数组方法学习

在学习之前,我们需要问一个为什么,为什么vue2 源码要重写数组方法

  • 响应式数据更新:通过重写数组方法,Vue 能够捕获对数组的变更操作(如 push、pop、shift 等),并在数据发生变化时自动更新视图,实现了数据的响应式更新。

  • 侦测变更:重写数组方法使 Vue 能够侦测到数组的变更,从而触发相应的更新。这样,当修改了数组的内容时,视图能够及时地做出相应的变化。

  • 便捷的操作语法:通过重写数组方法,Vue 使开发者能够直接对数组进行操作而无需手动触发视图更新,提供了一种更加便捷的操作语法。

  • 保持一致性:通过统一对数组方法的处理,Vue 2.x 在处理数组变更时能够保持代码的一致性和可维护性。

总的来说,重写数组方法使得 Vue 能够更好地支持响应式数据更新,提供了更加便捷和灵活的数据操作方式,从而使得开发者能够更加轻松地管理和操作数据,同时保持了视图和数据的一致性。

javascript 复制代码
// 保存数组原型方法的引用
const arrayProto = Array.prototype;
// 创建一个新的对象,继承自数组原型
const arrayMethods = Object.create(arrayProto);

// 重写数组的变异方法
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function (method) {
  // 缓存原始数组方法
  const original = arrayProto[method];
  // 重新定义数组方法
  def(arrayMethods, method, function mutator(...args) {
    // 调用原始数组方法
    const result = original.apply(this, args);
    const ob = this.__ob__;
    let inserted;
    // 处理新增元素
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break;
      case 'splice':
        inserted = args.slice(2);
        break;
    }
    if (inserted) ob.observeArray(inserted);
    // 触发更新
    ob.dep.notify();
    return result;
  });
});

// 重写之后的数组方法挂载到数组的原型上
function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

// 最后,将重写后的数组方法挂载到数组原型上
def(arrayProto, '$set', function $set(index, val) {
  // ... $set 方法的具体实现
}, false);

def(arrayProto, '$delete', function $delete(index) {
  // ... $delete 方法的具体实现
}, false);

export { arrayMethods };
相关推荐
牧羊狼的狼3 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手4 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one4 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲4 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell5 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830946 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮6 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
茯苓gao7 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
excel7 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
是誰萆微了承諾7 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang