Mari kita bincangkan tentang cara $set dilaksanakan dalam Vue?

Dalam pembangunan harian, $set juga merupakan API yang sangat praktikal, kerana teras tindak balas Vue2 adalah menggunakan Object.defineProperty ES5 Apabila kita lulus Secara langsung mengubah suai tatasusunan subskrip untuk menukar tatasusunan atau menambah sifat baharu pada objek Pada masa ini, Object.defineproperty tidak boleh memantau perubahan dalam data Pada masa ini, semua orang akan menggunakan $set untuk membenarkan operasi pengubahsuaian untuk bertindak balas , kita perlu tahu mengapa Seterusnya, mari kita lihat bagaimana $set dalam Vue dilaksanakan. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

senario aplikasi

 let dataArr = ["item1"];
 let dataObject = {
      name: "ccs"
    };

    dataArr[2] = "item2";
    dataObject.age = 22;
    响应失败，页面没有显示更新新增的数据

    this.$set(this.dataArr,2,'item2')
    this.$set(this.dataObject,'age',22)
    响应成功，页面显示更新新增的数据

menetapkan pelaksanaan

Seterusnya, mari kita lihat definisi $set dalam Vue

function set(target: Array<any> | Object, key: any, val: any): any {
  if (
    process.env.NODE_ENV !== "production" &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(
      `Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`
    );
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  const ob = (target: any).__ob__;
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== "production" &&
      warn(
        "Avoid adding reactive properties to a Vue instance or its root $data " +
          "at runtime - declare it upfront in the data option."
      );
    return val;
  }
  if (!ob) {
    target[key] = val;
    return val;
  }
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;
}

Dalam kod sumber, mula-mula tentukan sama ada sasaran set ialah undefined dan 基本类型. Jika ia undefined atau 基本类型, maka Ralat dilaporkan,
kerana pengguna tidak sepatutnya menetapkan perkara kepada jenis yang tidak ditentukan dan asas ,
dan kemudian menentukan sama ada sasaran adalah tatasusunan dan sama ada kunci ialah indeks undang-undang Indeks undang-undang bermakna nilai adalah Integer lebih besar daripada atau sama dengan 0,
adalah betul jika kedua-dua syarat adalah benar 目标数组调用splice方法插入或者修改数组,
di sini splice tidak. splice biasa, ialah sambatan dalam puisi Wang Wei , ia adalah susunan sambatan

yang telah ditulis semula oleh proksi vue untuk melaksanakan tindak balas.

$set melaksanakan tindak balas pengubahsuaian tatasusunan Ia merupakan sebahagian daripada kaedah tatasusunan yang ditulis semula oleh proksi. . Penulisan semula proksi dalam vue bukan sekadar , terdapat tujuh kaedah

. Pertama,

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
function def(obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writable: true,
        configurable: true
    });
}
methodsToPatch.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
  })
})

melaksanakan kaedah tatasusunan asal dan memperoleh nilainya splice Kemudian dinilai bahawa jika nilai ditambahkan pada tatasusunan push、pop、shift、unshift、splice、sort、reverseconst result = original.apply(this, args), nilai yang baru ditambah juga akan menjadi. dilaksanakan ,Langkah terakhirmendapatkan 响应式 tatasusunan ini dan mengedarkan serta mengemas kini dep dalam
. Jika anda ingin mengetahui lebih lanjut tentang responsif Vue, anda boleh menyemak artikel sebelumnya _ob_对象_ob_
Pewawancara bertanya kepada anda tentang prinsip responsif Vue2. Bagaimana anda menjawab? - Nugget (juejin.cn)
Respons pelaksanaan objek

Logik di bahagian bawah digunakan untuk memproses respons objek, mari kita teruskan Lihat

$set Pertama sekali, dinilai bahawa jika atribut dikembalikan secara langsung dalam objek sasaran untuk menamatkan logik,

kerana vue hanya akan kehilangan respons apabila menambah atribut yang bukan pada asalnya dalam objek sasaran

  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  const ob = (target: any).__ob__;
  if (!ob) {
    target[key] = val;
    return val;
  }
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;

,

, vue akan menjadikan semua atribut dalam data responsif semasa pemulaan Jika nilai ialah objek atau tatasusunan, tika baharu akan disimpan dalam __ob__ ,
Jika anda ingin mengetahui lebih lanjut tentang responsif Vue, anda boleh menyemak artikel sebelumnya例如 let obj={}  obj.name='ccs'
ObserverPewawancara bertanya kepada anda tentang prinsip responsif Vue2, bagaimana anda menjawab? - Nuggets (juejin.cn) mendapat _ob_ objek ini untuk penghakiman Jika ia tidak wujud, ini bermakna ia adalah
objek biasa yang belum dimulakan oleh vue sebaliknya. daripada Objek respons
, jika tidak, tambahkan kaedah get dan tetapkan kaedah secara manual pada atribut melalui untuk melaksanakan respons , dan kemudian panggil defineReactive secara manual dalam untuk menerbitkan kemas kini.
Ringkasandepnotify()Kaedah $set dalam vue mengendalikan tatasusunan dan objek pada asasnya dengan cara yang sama Ia menambahkan respons kepada nilai baharu dan kemudian mencetuskan kemas kini penghantaran secara manual.

(Mempelajari perkongsian video:

Tutorial pengenalan Vuejs

,

Video pengaturcaraan asas

)

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara $set dilaksanakan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!