Bagaimana untuk cache data dalam Vue?

Vue.js ialah rangka kerja bahagian hadapan yang popular Ia mengguna pakai seni bina MVVM (Model-View-ViewModel) dan menjadikan pembangunan bahagian hadapan lebih mudah dan cekap melalui idea pemaparan deklaratif dan komponenisasi. Semasa proses pembangunan, kami sering menghadapi masalah yang memerlukan caching data Artikel ini akan memperkenalkan kaedah caching data dalam Vue.

1. Atribut yang dikira

dikira ialah atribut yang dikira bagi Vue.js. Ia akan dikemas kini secara automatik apabila data berubah dan hanya akan dikira apabila diperlukan. Oleh itu, atribut yang dikira sesuai untuk mengendalikan logik data yang kompleks dan caching data.

Sebagai contoh, kami mempunyai contoh pengiraan harga:

<template>
  <div>
    <p>原价：{{ price }}</p>
    <p>折扣：{{ discount }}</p>
    <p>实际价格：{{ actualPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.8
    };
  },
  computed: {
    actualPrice() {
      return this.price * this.discount;
    }
  }
};
</script>

Dalam kod di atas, kami mentakrifkan atribut yang dikira Harga sebenar, yang akan mengira harga sebenar berdasarkan harga dan diskaun. Apabila harga atau diskaun berubah, ia mengemas kini harga sebenar secara automatik. Oleh itu, kami tidak perlu mengemas kini harga sebenar secara manual, sekali gus mencapai caching data.

2. Atribut jam tangan

jam tangan ialah atribut pemerhatian bagi Vue.js. Ia boleh melihat perubahan dalam data dan melaksanakan fungsi panggil balik apabila data berubah. Melalui atribut jam tangan, kami boleh mengendalikan logik caching apabila data berubah.

Sebagai contoh, kami mempunyai fungsi carian Kami berharap pengguna tidak akan melakukan operasi carian serta-merta selepas memasukkan kandungan dalam kotak input, tetapi akan melakukan operasi carian selepas pengguna berhenti menaip untuk tempoh masa. masa.

<template>
  <div>
    <input v-model="keyword" />
    <ul>
      <li v-for="item in searchResult" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    };
  },
  watch: {
    keyword(newVal) {
      this.debouncedQuery(newVal);
    }
  },
  created() {
    this.debouncedQuery = _.debounce(this.query, 500);
  },
  methods: {
    query(keyword) {
      // 执行搜索操作
      // ...
    }
  }
};
</script>

Dalam kod di atas, kami mentakrifkan kata kunci atribut jam tangan, yang akan mendengar perubahan dalam kata kunci dan melakukan operasi carian 500 milisaat selepas pengguna berhenti menaip melalui fungsi nyahpantun lodash. Ini melaksanakan caching data.

3. localStorage dan sessionStorage

Selain atribut yang dikira dan menonton, kami juga boleh menggunakan localStorage dan sessionStorage untuk melaksanakan caching data. localStorage dan sessionStorage ialah dua API yang disediakan oleh HTML5 untuk menyimpan data pada klien Kedua-duanya boleh menyimpan data selepas penyemak imbas ditutup, tetapi data localStorage tidak akan tamat tempoh, manakala data sessionStorage akan dikosongkan secara automatik selepas penyemak imbas ditutup.

Kami boleh menggunakan localStorage atau sessionStorage untuk menyimpan data dan mendapatkan data yang disimpan apabila halaman dimuat semula, dengan itu melaksanakan caching data.

Sebagai contoh, kami mempunyai senarai data dan kami berharap pengguna dapat mengingati statusnya apabila mengklik pada sekeping data, dan butiran data ini boleh dikembangkan secara automatik apabila halaman dimuatkan seterusnya .

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <h3 @click="toggleInfo(item.id)">
          {{ item.title }}
        </h3>
        <div v-show="isOpen(item.id)">详细信息</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{ id: 1, title: '数据1' }, { id: 2, title: '数据2' }, { id: 3, title: '数据3' }],
      status: {}
    };
  },
  created() {
    const status = JSON.parse(sessionStorage.getItem('status'));
    if (status) {
      this.status = status;
    }
  },
  methods: {
    toggleInfo(id) {
      this.$set(this.status, id, !this.status[id]);
      sessionStorage.setItem('status', JSON.stringify(this.status));
    },
    isOpen(id) {
      return this.status[id];
    }
  }
};
</script>

Dalam kod di atas, kami menggunakan sessionStorage untuk menyimpan status setiap data dalam senarai data dan menggunakan kaedah isOpen untuk menentukan sama ada butiran data perlu dikembangkan dan disimpan dalam objek status.

Ringkasan

Tiga kaedah pemprosesan caching data masing-masing mempunyai kelebihan dan kelemahan tersendiri Kita boleh memilih kaedah yang sesuai mengikut situasi tertentu. Atribut yang dikira sesuai untuk logik pengiraan mudah dan respons masa nyata kepada data, atribut jam tangan sesuai untuk logik pemprosesan data yang kompleks, dan localStorage dan sessionStorage sesuai untuk senario di mana data perlu dikongsi antara halaman yang berbeza. Dalam pembangunan projek, caching data adalah masalah yang tidak dapat dielakkan Penggunaan caching data yang munasabah boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna projek.

Atas ialah kandungan terperinci Bagaimana untuk cache data dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!