Vue computes the difference between a property cache and a method: see another piece of code

Date.now() is an example of a method that gets the same value when it calls date.now () repeatedly, which seems to be consistent with the calculated property. But the truth is there are differences, and I did some research on them. The error was caused by the accuracy of date.now ().

We can define the same function as a method rather than a calculated property. The end result is exactly the same. However, the difference is that computed attributes are cached based on their response dependencies. Computed properties are reevaluated only when the associated reactive dependencies change. — Vue3 official Chinese document

Recently I was looking at vue3 in the system and saw the computed properties here, and I was thinking, it seems that this is consistent with calling methods directly, so is it just syntactic optimization?

Sure enough, the result is the same, but the calculated properties are cached based on response dependencies.

Methods are recalculated every time they render, and properties that depend on the same amount are called from the cache instead of recalculated.

This was followed by an official example:

This also means that the following computed attributes will not be updated because date.now () is not a reactive dependency:

computed: {
  now() {
    return Date.now()
  }
}
Copy the code

Then I found the problem again, because according to what he said, here if we call the same content of the calculation property and function rendering in the web page, we will get different results, that is, when we have:

<script src="https://unpkg.com/vue@next"></script>
<div id="app" >
  <p v-for="i in 3">
    Time return by method:{{getTime()}}
  </p>
  <p v-for="i in 3">
    Time return by computed:{{getTimeComputed}}
  </p>
</div>
<script>
Vue.createApp({
  methods:{
    getTime(){
      return Date.now();
    }
  },
  computed:{
    getTimeComputed(){
      return Date.now();
    }
  }
}).mount('#app')
</script>
Copy the code

You should see that using the method loop three times should be different, while using the calculated properties is the same. But in fact my output is

Time return by method:1629390835396

Time return by method:1629390835396

Time return by method:1629390835396

Time return by computed:1629390835396

Time return by computed:1629390835396

Time return by computed:1629390835396
Copy the code

They were all the same, so I was surprised to find a number of articles that didn’t address the problem with this example.

After thinking about it, it suddenly occurred to me whether it could be caused by the time accuracy? That is, it runs so fast that the difference is lost in the accuracy.

Instead of date.mow (), we changed it to perform.now (), which is a more precise time in the browser API to measure performance (node doesn’t have it).

Unlike other timelike functions available in JavaScript (such as date.now), the timestamps returned by window.performance.now() are not limited to one-millisecond accuracy. Instead, they represent the time as floating point numbers with accuracy up to microseconds.

This timestamp is not actually high precision. To reduce security threats like Spectre, various browsers round off values of this type to varying degrees. (Firefox rounds to 2ms starting with Firefox 59.) Some browsers may also randomize this value slightly. The accuracy of this value may be improved again in future releases; Browser developers are still investigating these timing attacks and how best to mitigate them. MDN Web Docs so we use this feature more to detect method repetitions.

And so we have

Time return by method:5518.70000000298 Time return by method:5518.79999999702 Time return by method:5518.89999999851 Time return by computed: 5519.20000000298 Time return by computed: 5519.20000000298 Time return by The computed: 5519.20000000298Copy the code

Yes, that’s exactly what the documentation wants us to see! We will see that the results of three calls to the method are not the same, and that computed results are consistent.

Of course, you can sometimes get duplicate results due to performance, but this is much lower than date.now ().