Why does vue computed have cache?

In Vue we often use computed properties (computed), which is a convenient calculated property method provided by Vue. Using computed, you can easily dynamically calculate a new value based on changes in data without writing a lot of logical judgments in the template.

But unlike methods or watchers, computed has a caching mechanism. In other words, if the data on which a calculated attribute depends has not changed, then the value will not be recalculated, thus improving calculation efficiency.

Now let’s discuss why computed has a caching mechanism.

First, let's look at an example:

<template>
  <div>{{ message }}</div>
  <button @click="updateData">Update data</button>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    }
  },
  computed: {
    message() {
      console.log('computed');
      return `${this.firstName} ${this.lastName}`;
    },
  },
  methods: {
    updateData() {
      this.firstName = 'Tom';
    },
  },
};
</script>

When we render the page for the first time, computed will be calculated as a new value, and console.log('computed') will only be executed once at this time. Then, we click the button, and the firstName is changed to 'Tom'. At this time, we will find that the message on the page has not been recalculated, and console.log('computed') has not been executed.

Simply put, this is because computed uses a caching mechanism. When the data that computed depends on has not changed, Vue will directly retrieve the calculation results from the cache without re-operating. Therefore, we trigger the change of updating firstName here. Although the data has been modified, the message has not been recalculated due to the computed caching mechanism.

With this caching mechanism, we can not only improve computing efficiency, but also avoid unnecessary calculations, thereby reducing the occupation of system resources and improving system performance.

However, in some specific scenarios, the computed caching mechanism may cause some problems, such as still returning cached values ​​when the dependent data is empty. This requires us to pay attention to the data changes when using computed to ensure the correctness of the calculation results.

In short, the computed caching mechanism is one of the very useful features in personal development and projects. It allows us to perform data calculations more conveniently and at the same time improves the performance of the system. It is worthy of our in-depth understanding and use.

The above is the detailed content of Why does vue computed have cache?. For more information, please follow other related articles on the PHP Chinese website!