Bagaimana untuk menyelesaikan rampasan data vue

Bagaimana untuk menyelesaikan rampasan data Vue?

Vue ialah rangka kerja bahagian hadapan yang sangat popular, sering digunakan untuk pembangunan SPA (aplikasi halaman tunggal) Salah satu ciri terasnya ialah pengikatan data (didorong data), yang menggunakan pengikatan data untuk mencapai pembangunan komponen. .

Pengikatan data ialah salah satu ciri teras rangka kerja Vue menggunakan teknologi rampasan data untuk mencapai pengikatan data dua hala. Dalam Vue, jika kami mengubah suai data dalam model data, paparan akan dikemas kini secara automatik, dan begitu juga sebaliknya. Tetapi bagaimana untuk menyelesaikan masalah yang disebabkan oleh rampasan data?

Prinsip rampasan data Vue

Apabila Vue menggunakan pengikatan data dua hala, data akan dirampas Contohnya, kami menggunakan kurungan berganda ({{}}) dalam templat untuk mengikat Data, seperti yang ditunjukkan di bawah:

<div>
  {{message}}
</div>

Dalam Vue, kaedah pengikatan ini dipanggil "pengikatan templat", dan kemudian Vue akan menggunakan semua kaedah pengikatan ini dalam "fasa penyusunan templat" Gantikan kod JavaScript seperti berikut :

var data = { message: 'Hello,Vue!' };  
var app = new Vue({
  el: '#app',
  data: data
});

Kod ini akan memindahkan semua sifat dalam objek data yang kami takrifkan kepada contoh Vue, dan kemudian laksanakan kod berikut:

Object.keys(data).forEach(key => {
  proxyData(this, key, data[key]);
});

Antaranya, kaedah proxyData ialah kaedah tersuai , terutamanya digunakan untuk melaksanakan rampasan data. Rampasan data terutamanya ditunjukkan dalam objek contoh Vue.

Proses rampasan khusus adalah seperti berikut:

1. Vue akan menggunakan kaedah Object.defineProperty() untuk merampas semua sifat pada objek data.

function proxyData (vm, key, val) {
  Object.defineProperty(vm, key, {
    configurable: false,
    enumerable: true,
    get () {
      console.log(`get ${val}`);
      return val;
    },
    set (newVal) {
      console.log(`set ${newVal}`);
      val = newVal;
      // 触发diff算法 - 更新页面
      vm.$nextTick(() => {
        // 触发更新
      });
    }
  });
}

2. Dalam fungsi get, Vue akan menambah objek pemerhati pada baris gilir pelanggan. Apabila data berubah, objek pemerhati dimaklumkan dan mengemas kini UI.
3. Dalam fungsi yang ditetapkan, Vue akan memberitahu objek pemerhati tentang pengubahsuaian data dan objek pemerhati akan memaparkan semula UI.
4. Vue menggunakan DOM maya untuk mencapai operasi DOM yang cekap, mengelakkan kesesakan prestasi yang disebabkan oleh operasi terus pada DOM.

Masalah dengan rampasan data Vue

Walaupun Vue melaksanakan pengikatan data dua hala melalui rampasan data, kaedah ini juga membawa beberapa masalah.

1. Atribut baharu objek tidak boleh dipantau

Apabila kami menggunakan Vue, kami mendapati bahawa jika kami menambah atribut baharu pada objek dalam model data, maka atribut ini tidak boleh dipantau, iaitu, pengubahsuaian sifat ini tidak akan mencetuskan pemaparan semula. Hanya sifat yang wujud apabila objek dimulakan boleh diperhatikan.

var app = new Vue({
  el: '#app',
  data: {
    obj: { a: 1, b: 2 }
  }
});

// 需要新增c属性
app.obj.c = 3;

// 修改c属性，视图不会更新
app.obj.c = 4;

2. Operasi tatasusunan tidak boleh dipantau

Untuk pengubahsuaian tatasusunan, seperti operasi tekan, pop, syif dan nyahshift, Vue juga tidak boleh memantaunya untuk menyediakan kaedah Khas untuk membuat perubahan, seperti: Vue.set() dan Vue.delete().

var app = new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3]
  }
});

// 只能使用Vue提供的特殊方法进行数组的操作
 Vue.set(app.arr, 3, 4);

Operasi sedemikian jelas menyusahkan. Kami boleh menggunakan perpustakaan untuk menyelesaikan masalah ini.

Vuex ialah perpustakaan pengurusan negeri yang dibangunkan khas untuk Vue. Ia boleh membantu kami mengurus model data secara berpusat dan berkongsi keadaan yang sama antara berbilang komponen, sekali gus memudahkan pengurusan negeri dalam Vue.

Melalui Vuex, kami boleh membahagikan berbilang komponen dengan data yang dikongsi menjadi pengurus keadaan berstruktur pepohon Apabila komponen ingin mengubah suai atribut tertentu, ia perlu menyerahkan Tindakan secara tidak langsung Kaedah mencetuskan Mutasi secara setempat. Perkara yang boleh diubah oleh Mutasi ialah Keadaan Apabila Keadaan berubah, semua komponen yang bergantung pada Keadaan ini dikemas kini secara automatik.

3. Isu prestasi senarai panjang

Dalam Vue, jika kita mempunyai senarai yang panjang, apabila salah satu data berubah, ia akan menyebabkan semua data dalam keseluruhan senarai menjadi perubahan. Data semuanya dipaparkan semula, yang boleh menyebabkan masalah prestasi. Untuk menyelesaikan masalah ini, Vue menyediakan atribut utama Kami boleh memberikan setiap objek dalam senarai nilai kunci, supaya apabila data berubah, hanya item yang diubah akan dipaparkan semula, bukan keseluruhan senarai.

<template>
  <div>
    <li v-for="(item, index) in list" :key="item.id">{{item.name}}</li>
  </div>
</template>

Ringkasan

Vue menggunakan rampasan data untuk melaksanakan pengikatan data dua hala, tetapi kaedah ini akan membawa beberapa masalah, seperti ketidakupayaan untuk memantau sifat baharu objek dan ketidakupayaan untuk mengendalikan perubahan dalam tatasusunan tunggu. Tetapi terdapat banyak cara untuk menyelesaikan masalah ini dalam Vue, seperti menggunakan atribut utama untuk meningkatkan prestasi pemaparan senarai, menggunakan Vuex untuk pengurusan negeri, dsb. Kita perlu memilih kaedah yang paling sesuai untuk menyelesaikan masalah yang mungkin disebabkan oleh rampasan data Vue.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan rampasan data vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!