Perubahan objek Vue tidak dipaparkan

Kata Pengantar

Vue.js ialah pustaka JavaScript popular yang menyediakan rangka kerja yang ringkas dan mudah digunakan, memberikan pengguna kaedah pengikatan data dan pengaturcaraan berasaskan komponen yang cekap. Walau bagaimanapun, apabila kami membangunkan menggunakan Vue.js, kami mungkin menghadapi beberapa masalah. Salah satu masalah biasa ialah apabila objek data komponen berubah, komponen tidak dipaparkan semula, menyebabkan tiada perubahan dalam antara muka. Dalam artikel ini, kami akan meneroka punca masalah ini dan cara menyelesaikannya.

Body

Idea teras Vue.js ialah paparan dipacu data. Apabila objek data berubah, paparan dikemas kini secara automatik. Ini dicapai melalui sistem reaktif Vue.js. Vue.js menambah semua objek data ke dalam sistem reaktif pada masa definisi komponen. Apabila sifat objek data berubah, sistem reaktif secara automatik mengesan perubahan dan memberitahu paparan untuk dikemas kini.

Walau bagaimanapun, kadangkala kita menghadapi masalah apabila sifat objek data berubah, paparan tidak dipaparkan semula. Dalam kes ini, kita perlu menganalisis dengan teliti punca masalah dan mencari penyelesaian.

Pertama sekali, kita perlu menjelaskan dengan jelas bahawa apabila kita mengubah suai sifat objek, Vue.js hanya akan mengesan sifat langsung objek tersebut. Apabila kami menambah sifat baharu pada objek, Vue.js tidak akan mengesan perubahan dalam harta tersebut. Ini kerana sifat yang baru ditambah tidak ditambahkan pada sistem reaktif.

Sebagai contoh, dalam kod berikut, kami menambah atribut baharu newProp pada objek:

const vm = new Vue({
  data: {
    obj: {
      prop1: 'value1',
      prop2: 'value2'
    }
  }
})

vm.obj.newProp = 'new value'

Memandangkan newProp belum ditambahkan pada sistem responsif, apabila kami mengubah suai newProp nilai, paparan tidak akan dipaparkan semula.

Untuk menyelesaikan masalah ini, kami boleh menggunakan kaedah $set yang disediakan oleh Vue.js untuk menambah atribut baharu pada sistem responsif:

vm.$set(vm.obj, 'newProp', 'new value')

Dengan cara ini, apabila kami mengubah suai Nilai newProp, paparan akan dipaparkan semula secara automatik.

Selain sifat baharu yang tidak dikesan, masalah yang sama berlaku apabila kami mengubah suai secara langsung elemen dalam tatasusunan. Sebagai contoh, dalam kod berikut, kami mengubah suai terus elemen dalam tatasusunan arr:

const vm = new Vue({
  data: {
    arr: ['elem1', 'elem2', 'elem3']
  }
})

vm.arr[1] = 'new elem2'

Memandangkan Vue.js tidak mengesan perubahan dalam elemen dalam tatasusunan, paparan tidak akan dipaparkan semula .

Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah $set yang disediakan oleh Vue.js untuk menggantikan elemen asal dengan elemen yang diubah suai:

vm.$set(vm.arr, 1, 'new elem2')

Dengan cara ini, apabila kita mengubah suai elemen dalam tatasusunan, paparan juga akan dipaparkan semula secara automatik.

Selain itu, kami juga perlu ambil perhatian bahawa dalam sesetengah kes, kami mungkin perlu memaksa paparan dikemas kini secara manual. Sebagai contoh, apabila kami menggunakan sifat pengiraan atau pendengar, paparan tidak dikemas kini secara automatik apabila nilai dalam sifat pengiraan atau pendengar berubah. Kita perlu menggunakan kaedah $forceUpdate untuk memaksa paparan dikemas kini:

const vm = new Vue({
  data: {
    value: 1
  },
  computed: {
    computedValue () {
      return this.value + 1
    }
  },
  methods: {
    update () {
      this.value++
      this.$forceUpdate()
    }
  }
})

Ringkasan

Semasa proses pembangunan Vue.js, apabila kita menghadapi masalah yang objek data komponen berubah, komponen tidak membuat semula apabila melakukan ini, kita perlu mempertimbangkan perkara berikut:

• Atribut baharu dan elemen tatasusunan akan diabaikan oleh sistem responsif Vue.js, dan kami perlu menggunakan kaedah $set untuk menambahkannya pada sistem responsif
• Apabila kami menggunakan sifat atau pendengar yang dikira, paparan tidak akan dikemas kini secara automatik apabila nilai dalam sifat yang dikira atau pendengar berubah, kami perlu gunakan kaedah $forceUpdate untuk memaksa paparan dikemas kini.

Kaedah di atas boleh membantu kami menyelesaikan masalah objek data komponen tidak dipaparkan apabila ia berubah. Tetapi kami masih perlu mengikut prinsip sistem responsif Vue.js dan menggunakan sepenuhnya kemudahan yang dibawanya. Jika anda menghadapi masalah, analisis dengan teliti puncanya dan cari penyelesaian dan bukannya mengelakkan masalah itu secara langsung.

Atas ialah kandungan terperinci Perubahan objek Vue tidak dipaparkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!