どのようにVUEは、アレイ法を変異されたのですか?例えばポップ、プッシュし、スプライスなど

1.アレイを別々に処理される理由

従来の位相ヴューでは、Object.definePropertyデータによる治療に応答が遮断され、この方法は、アレイ内部の変更、配列の長さの変化を監視することができない、のように撮影した配列の変化は、我々は、これらの操作を実行する必要がハック、VUEそれらの変化を監視することができましょう。

アレイ処理2.方法

methodsToPatch.forEach(function(method) {
    // cache original method
    // 获取原方法
    var original = arrayProto[method];
    // def方法重新定义arrayMethods的method方法,然后将新的取值方法赋值
    def(arrayMethods, method, function mutator() {
      var args = [],
        len = arguments.length;
      while (len--) args[len] = arguments[len];

      var result = original.apply(this, args);
      var ob = this.__ob__;
      var inserted;
      switch (method) {
        case 'push':
        case 'unshift':
          // [].push(1),[].unshift(1)
          // arg = [1]
          inserted = args;
          break
        case 'splice':
          // [1,2,3].splice(0,1,1)
          // 第三个参数为插入的值
          inserted = args.slice(2);
          break
      }
      if (inserted) { ob.observeArray(inserted); }
      // 监听变化,如果不是插入操作直接循环响应
      // 如果是去除数组参数方法,触发一次notify将会重新计算
      // 如果仅仅是数字数据,任何操作只需要再次执行一次notify则可以
      // 但是如果新增的是一个对象类型,就需要重新监听
      // 为什么用角标和length属性不能监听的原因是因为无法触发obj的get方法,所以没法动态监听
      // notify change
      ob.dep.notify();
      return result
    });
  });

質問は、スプライスやハックの他の方法、ポップ、プッシュするVUEを尋ねたとして、ハックは、VUEのソースを参照してくださいどのように反応する技術に、新しいオブジェクト、レスポンスの新しいオブジェクトタイプを追加する場合は、非常に簡単です。
たとえば抜きをプッシュすると(前方または後方のいずれかから)、レコードがオブジェクトに追加されたアレイに新しいオブジェクトをプッシュ、および場合、スプライスのために、オブジェクトのメソッド呼び出しが応答オブジェクトに追加観察方法を変換します新しいオブジェクトは、オブジェクト・レスポンスの式に追加されます。
最後のステップは、更新するビューアを思い出させて、変更の配列を捨てることです。

3.問題

配列の添字を変更Object.defineProperty欠陥の直接の原因は、このポイントに、ハックではない場合のために、VUE月、$ setメソッドは、もちろん、プロキシオブジェクトを使用して聞くために、最新のソリューションが、欠点プロキシの互換性である提供しますそれの互換性とパフォーマンスを容易にするためにあきらめるだろう、すべては特に大きな決断を見なければなりません。

4.ps

3.0出てくるとき、私はまで待つことができないかわかりません

公開された229元の記事 ウォン称賛80 ビュー410 000 +

おすすめ

転載: blog.csdn.net/qq_34629352/article/details/104960152