Apakah sebab mengapa vue tidak boleh mendengar objek tersebut

Kata Pengantar

Dalam pembangunan Vue.js, pengikatan data dua hala sering digunakan, yang merupakan salah satu fungsi teras Vue.js. Tetapi kadangkala anda mendapati bahawa apabila anda mencipta objek pada contoh Vue dan kemudian menambah harta baharu pada objek, Vue tidak mengesan perubahan sifat. Artikel ini akan meneroka isu ini secara terperinci.

Artikel ini akan meneroka soalan berikut:

1. Dalam keadaan apakah objek Vue boleh mendengar perubahan harta benda?
2. Dalam keadaan apakah Vue boleh gagal mengesan perubahan dalam objek?
3. Bagaimanakah Vue menyelesaikan masalah tidak dapat mendengar objek?

Dalam keadaan apakah objek Vue boleh mengesan perubahan sifat?

Dalam Vue.js, hanya sifat yang ditakrifkan apabila menghidupkan objek Vue adalah reaktif. Contohnya:

var vm = new Vue({
  data: {
    message: 'Hello world'
  }
});

// 改变message属性，view会自动更新
vm.message = 'Changed message';

Jika kita mentakrifkan jenis data yang kompleks dalam contoh Vue dari awal, seperti objek atau tatasusunan, sifat dalam objek atau item dalam tatasusunan akan menjadi reaktif secara automatik harta benda .

Contohnya:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    },
    arr: [1, 2, 3, 4, 5]
  }
});

// 对象的属性变化可以被侦听到
vm.obj.message = 'Changed message';

//数组的项目变化可以被侦听到
vm.arr.push(6);

Memandangkan Vue.js akan menggunakan kaedah Object.defineProperty() pada contoh Vue untuk menukar sifat dalam objek kepada getter/setters, objek boleh dikesan Perubahan dalam sifat.

Dalam keadaan apakah Vue boleh gagal mengesan perubahan dalam objek?

Di atas, kami menyebut bahawa apabila jenis data yang kompleks ditakrifkan dalam contoh Vue, sifat dalam objek atau item dalam tatasusunan akan menjadi sifat reaktif secara automatik. Tetapi apabila anda menambah harta baharu pada objek, Vue tidak boleh mendengar perubahan dalam harta itu.

Contohnya:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 新添加属性，无法被侦听到
vm.obj.newProp = 'new value';

//改变新添加属性，仍然无法被侦听到
vm.obj.newProp = 'changed value';

Vue tidak boleh mendengar perubahan dalam sifat yang baru ditambah kerana Vue.js hanya mendengar sifat yang telah ditakrifkan apabila membuat seketika objek Vue dan Daripada mendengar sifat yang ditambahkan nanti. Iaitu, apabila anda menambah harta baharu pada masa jalan, anda perlu menggunakan kaedah Vue.set() untuk menambah harta baharu dan menjadikannya reaktif. Contohnya:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 使用Vue.set()方法来添加新属性
Vue.set(vm.obj, 'newProp', 'new value');

//新属性可以被侦听到
vm.obj.newProp = 'changed value';

Bagaimanakah Vue menyelesaikan masalah tidak dapat mendengar objek?

Selain menggunakan kaedah Vue.set() untuk menambah sifat baharu dan menjadikannya reaktif, terdapat cara lain untuk menyelesaikan masalah tidak dapat mendengar objek.

1. Tentukan semua sifat dalam instantiasi Vue

Cara terbaik untuk mengelak daripada menambah sifat baharu selepas mencipta tika Vue adalah untuk menentukan semua sifat dalam instantiasi Vue. Contohnya:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world',
      newProp: ''
    }
  }
});

//新属性现在侦听到了
vm.obj.newProp = 'new value';

2. Gunakan kaedah Vue.observable()

Kaedah Vue.observable() mengambil objek untuk responsif sebagai parameter dan mengembalikan objek responsif Objek berfungsi. (Perhatikan bahawa kaedah ini baharu dalam versi Vue 2.6.0). Contohnya:

import Vue from 'vue';

var obj = {
  message: 'Hello world'
};
//使用Vue.observable()方法
var observableObj = Vue.observable(obj);

//新属性现在侦听到了
observableObj.newProp = 'new value';

Kesimpulan

Dalam pembangunan Vue.js, fungsi pengikatan data dua hala adalah sangat penting. Walau bagaimanapun, apabila menggunakan objek Vue, anda perlu memberi perhatian kepada perkara berikut:

1. Hanya sifat yang ditakrifkan apabila menghidupkan objek Vue adalah reaktif.
2. Apabila anda menambahkan sifat baharu pada objek, Vue tidak boleh mendengar perubahan dalam harta tersebut.
3. Jika anda perlu menambah sifat baharu dan menjadikannya responsif, gunakan kaedah Vue.set().
4. Vue versi baharu, seperti Vue 2.6.0, boleh menggunakan kaedah Vue.observable() untuk menukar objek kepada objek reaktif.

Apabila anda boleh menggunakan atribut responsif dengan betul, Vue.js akan membawakan anda kod ringkas dan padat, UI intuitif dan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Apakah sebab mengapa vue tidak boleh mendengar objek tersebut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!