Computed attributes are cached based on their reactive dependencies, whereas calling the watch method will always execute the function again whenever a rerender is triggered.

So what are reactive dependencies?

  • The reactive form refers to thedataProperty declared in
  • Dependence refers to thedepsAn array of items,depsAn array isDynamic changes at vUE runtime 的

responsive

The following computed properties will not be updated because date.now () is not responsive:

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

Rely on

Here’s an example on vue’s website

var vm = new Vue({
 el: '#example'.data: {
   message: 'Hello'
 },
 computed: {
   // Calculates the getter for the property
   reversedMessage: function () {
     // 'this' points to the VM instance
     return this.message.split(' ').reverse().join(' ')}}})Copy the code

Vue knows that VM. reversedMessage depends on VM. message

This would be misleading to think that all variables written in the reversedMessage function are dependencies, but in fact computed dependencies are determined at runtime, not compile time

Here’s an example:

data(){
    a: 1.b: 1.c: 1,},computed: {
    foo() {
      if (this.a >= 0) {
       return this.a;
      } else {
       return this.b + this.c; }}},Copy the code

Can know from the source code, for calculating properties foo, foo is enclosing _computedWatchers created instance, foo rely on this. _computedWatchers. Foo deps array, Only need to print this. _computedWatchers. Foo deps and observe the change of deps array, can see depends on what

Do not print this. _computedWatchers. Foo deps

Print directly enclosing _computedWatchers. Foo. Deps and print this. _computedWatchers. After the foo manually in the console to see deps is not consistent, cause I don’t know. Console does sometimes have asynchrony problems, hope to know the cause of console crazy boss can help out **

However, since dePS is wrapped, console.log can’t see what each item in the DEPS array is, so it needs to be changed indirectly by observing the length of the DEPS array

Principle:

When foo runs, it emptens the dependent array deps and adds all the values of this.a to the dependent array DEp. When the values in the dependent array are changed, foo is re-executed to get the latest result. Caches the results and overwrites the last cached results. Any other case where a value in a non-DEPS array triggers a change will only return the value in the cache

  • Jsbin Online test

  • Test 1:

In the template of {{enclosing foo}}, in order to perform a function foo, check after executing foo function for the first time, after several of deps rely on items, you can see the console the length of the printed deps is 1, the enclosing foo rely only on a,

This. B = 2, state update, trigger template rerender, {{this.foo}}, Instead of executing foo, which should have been executed, the last cached result is returned

  • Test 2:

Change the a in data to -1, and select {{this.foo}} from template to execute foo once, and then see how many entries in the deps dependency there are after the first execution of foo, because the else branch is used. A, this.b, this.c, so you can see that the console prints a deps of length 3, and this.foo’s dependencies are a, b, and C. The value of this. A is added to the deps array. By the end of the function, there is only a in DEPS, so the dePS length changes from 3 to 1

Reference: How to understand computed in VUE?