How to cache data in Vue?

Vue.js is a popular front-end framework that adopts the MVVM (Model-View-ViewModel) architecture and makes front-end development more convenient and efficient through the ideas of declarative rendering and componentization. During the development process, we often encounter problems that require data caching. This article will introduce the data caching method in Vue.

1. computed attribute

computed is a computed property of Vue.js. It will automatically update when the data changes, and will only be calculated when needed. Therefore, the computed attribute is suitable for handling complex data logic and data caching.

For example, we have an example of price calculation:

<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>

In the above code, we define a computed attribute actualPrice, which will calculate the actual price based on price and discount. When price or discount changes, it automatically updates the actual price. Therefore, we do not need to manually update the actual price, thus achieving data caching.

2. watch attribute

watch is an observation attribute of Vue.js. It can observe changes in data and execute callback functions when the data changes. Through the watch attribute, we can handle the caching logic when the data changes.

For example, we have a search function. We hope that the user will not perform the search operation immediately after entering content in the input box, but will perform the search operation after the user stops inputting for a period of time.

<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>

In the above code, we define a watch attribute keyword, which will listen for changes in keyword and perform a search operation 500 milliseconds after the user stops typing through lodash's debounce function. This implements data caching.

3. localStorage and sessionStorage

In addition to computed and watch attributes, we can also use localStorage and sessionStorage to implement data caching. localStorage and sessionStorage are two APIs provided by HTML5 for storing data on the client. They can both save data after the browser is closed, but localStorage data will not expire, while sessionStorage data will be automatically cleared after the browser is closed. .

We can use localStorage or sessionStorage to save data and obtain the saved data when the page is reloaded, thereby achieving data caching.

For example, we have a data list, and we hope that the user can remember its status when clicking on a certain data, and the detailed information of this data can be automatically expanded the next time the page is loaded.

<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>

In the above code, we use sessionStorage to save the status of each data in the data list, and use the isOpen method to determine whether the data details need to be expanded and saved in the status object.

Summary

The three data caching processing methods each have their own advantages and disadvantages. We can choose the appropriate method according to the specific situation. The computed attribute is suitable for simple calculation logic and real-time response to data, the watch attribute is suitable for complex data processing logic, and localStorage and sessionStorage are suitable for scenarios where data needs to be shared between different pages. In the development of the project, data caching is an inevitable problem. Reasonable use of data caching can improve the development efficiency and user experience of the project.

The above is the detailed content of How to cache data in Vue?. For more information, please follow other related articles on the PHP Chinese website!