Any difference between using this to access the watcher's value and using the argument?

user_9339516 0
Viewed 26

This is not particularily important, but I am trying to learn Vue.

Is there any difference between which of these two values is used? They should always be the same, right?

For example:

watch: {
    myVar(value) {
        console.log('this.myVar, value, this.myVar === value', this.myVar, value, this.myVar === value)
    }
}

Is the inclusion of this argument just for convenience/readability? Or is there some reason one would use one or the other?

vuejs2 vue.js
1 Answers

this.myVar and value are the same in this case. The use of value is tiny bit more efficient because it doesn't require to access this property again, and it's shortened to one-letter variable in minified build. More importantly, it can be named for readability or brevity, and can be complemented with another parameter:

myVar(value, oldValue) {
  ...

In case a watcher is asynchronous, value captures the original value, while this.myVar contains the current value, which may be desirable or not depending on a case:

async myVar(value, oldValue) {
  ...
  console.log(this.myVar !== value);
user_37315010
Related