vue2的响应式原理

该博客探讨了Vue.js响应式系统的实现,通过`Object.create()`创建新对象并重写数组方法,确保数据变更时能触发视图更新。核心内容包括`observer`函数用于数据劫持,`defineReactive`用于定义响应式属性,以及如何监听并更新视图。
摘要由CSDN通过智能技术生成

  const data = {

    name: "vue",

    age: 18,

    info: {

      test: "vuetest",

    },

    list: [1, 2, 3, 4, 5],

  };

  const oldArrProto = Array.prototype;

  const newArrProto = Object.create(oldArrProto); //克隆新对象:它里面的原型空间  方法都是原数组的

  ["push", "pop", "shift", "unshift", "splice"].forEach((methodName) => {

    // 克隆原型里面这7个方法,加一步更新视图

    newArrProto[methodName] = function () {

      // 1. 更新视图;

      console.log("更新视图操作----->>>");

      //2. 执行原来的方法

      oldArrProto[methodName].call(this, ...arguments);

    };

  });

  observer(data);

  // 遍历挨个劫持

  function observer(target) {

    if (typeof target !== "object" || target === null) {

      return target;

    }

    if (target.constructor === Array) {

      //  如果是数组的话, 就把原型对象修改成重写之后的(主要是为了能够进行更新视图操作)

      target.__proto__ = newArrProto;

    }

    for (let key in target) {

      defineReactive(target, key, target[key]);

    }

  }

  function defineReactive(target, key, value) {

    if (typeof value === "object") {

      // 多层嵌套递归

      observer(value);

    }

    Object.defineProperty(target, key, {

      get() {

        return value;

      },

      set(newValue) {

        if (typeof newValue === "object") {

          observer(newValue);

        }

        if (newValue !== value) {

          value = newValue;

          console.log("更新视图操作----->>>");

        }

      },

    });

  }

  // data.name = '哈哈哈'

  // data.info.test = '1111'

  // data.name = {

  //   name1: 'name1',

  //   name2: 'name2'

  // }

  // data.name.name1 = '修改name1'

  data.list.push(555);

上面有用到Object.create() ,这个方法创建一个新对象,使用现有的对象来提供新创建的对象的proto,是为了重写数组上的方法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值