Cara menggunakan jam tangan dalam Vue untuk memantau perubahan dalam tatasusunan

Cara menggunakan jam tangan dalam Vue untuk memantau perubahan dalam tatasusunan

Vue ialah salah satu rangka kerja yang paling banyak digunakan dalam pembangunan bahagian hadapan Ia menyediakan banyak cara mudah untuk melaksanakan responsif data, pemaparan templat dan komponen. dan fungsi lain. Dalam Vue, kami sering menggunakan jam tangan untuk memantau perubahan data Walau bagaimanapun, apabila kami perlu memantau perubahan tatasusunan, kami perlu memberi perhatian kepada beberapa butiran.

Dalam Vue, kita boleh menggunakan jam tangan untuk memantau perubahan dalam satu sifat atau objek Penggunaan asas adalah seperti berikut:

watch: {
  // 监听对象属性
  obj: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  },
  // 监听单个属性
  prop: function (newVal, oldVal) {
    // ...
  }
}

Jika kita ingin memantau perubahan dalam tatasusunan, kita perlu. perhatikan perkara berikut:

1 Gunakan kaedah vm.$watch

Vue menyediakan kaedah vm.$watch untuk memantau perubahan data, yang mengembalikan fungsi untuk membatalkan pemantauan. Vm di sini merujuk kepada contoh Vue. Untuk tatasusunan, kita boleh menggunakan kaedah ini untuk memantau perubahan dalam tatasusunan. Penggunaan asasnya adalah seperti berikut:

vm.$watch('arr', function (newVal, oldVal) {
  // ...
}, {
  deep: true
})

di mana arr ialah tatasusunan yang perlu kita pantau newVal dan oldVal dalam fungsi panggil balik pengendali masing-masing mewakili nilai baharu dan nilai lama yang dipantau. Di samping itu, memandangkan adalah perkara biasa bagi setiap elemen dalam tatasusunan untuk menjadi objek, anda perlu menetapkan dalam kepada benar untuk mencapai pemantauan mendalam.

Perlu diambil perhatian bahawa Vue tidak akan merampas tatasusunan yang dipantau secara automatik menggunakan kaedah vm.$watch. Oleh itu, kita perlu merampas tatasusunan secara manual untuk memantau perubahan dalam tatasusunan.

2. Pantau setiap elemen dalam tatasusunan

Jika kita perlu memantau perubahan dalam setiap elemen dalam tatasusunan, kita boleh menggunakan parameter segera dan pengendali dalam kaedah vm.$watch kod adalah seperti berikut:

arr.forEach(function (item, index) {
  vm.$watch(
    function () {
      return arr[index];
    },
    {
      immediate: true,
      deep: true,
      handler: function (newVal, oldVal) {
        // ...
      }
    }
  );
});

Immediate di sini adalah benar, yang bermaksud bahawa fungsi panggil balik akan dilaksanakan sekali apabila mendengar. Perlu diingatkan bahawa kod di atas tidak merampas keseluruhan tatasusunan, tetapi memantau setiap elemen secara individu.

3. Gunakan sifat yang dikira

Sifat yang dikira dalam Vue boleh mengira data baharu berdasarkan data sedia ada, jadi kami boleh menggunakan sifat yang dikira untuk memantau perubahan dalam tatasusunan. Penggunaan asasnya adalah seperti berikut:

computed: {
  // 监听arr数组
  arrWatcher: function () {
    this.arr; // 调用一次arr，以实现依赖收集
    return this.arr;
  }
},
watch: {
  // 监听计算属性
  arrWatcher: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

ArrWatcher di sini ialah atribut terkira yang kami takrifkan dan nilai pulangan atribut terkira ini ialah tatasusunan yang dipantau. Pantau sahaja perubahan harta yang dikira dalam jam tangan. Memandangkan sifat yang dikira secara automatik mengumpulkan kebergantungan, apabila tatasusunan berubah, sifat yang dikira dikemas kini secara automatik, mencetuskan fungsi panggil balik jam tangan.

Apabila menggunakan sifat yang dikira untuk memantau perubahan tatasusunan, anda perlu memberi perhatian kepada satu perkara: jika kita hanya perlu memantau perubahan dalam panjang tatasusunan dan tidak mengambil berat tentang perubahan dalam elemen dalam tatasusunan, maka kita hanya boleh menggunakan sifat yang dikira untuk mencapai ini. Tetapi jika anda perlu memantau perubahan dalam elemen dalam tatasusunan, anda juga perlu merampas setiap elemen dalam tatasusunan, dan anda juga perlu menggunakan kaedah vm.$watch.

Ringkasnya, kita boleh menggunakan kaedah vm.$watch, memantau setiap elemen dalam tatasusunan dan menggunakan sifat yang dikira untuk memantau perubahan dalam tatasusunan dalam Vue. Adalah penting untuk ambil perhatian bahawa apabila menggunakan kaedah ini, tatasusunan harus dirampas untuk memastikan bahawa Vue boleh memantau perubahan dalam tatasusunan dengan betul.

Atas ialah kandungan terperinci Cara menggunakan jam tangan dalam Vue untuk memantau perubahan dalam tatasusunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!