Why watch the chat Vue callback object can not be a function of the arrow

This article focuses on knowledge Glance:

Vue in the watch object callback function is not a function of the arrow.

The arrow points to the function of this is where the object function definition, this refers to the ordinary function is a function where the object is running.

this function points to the problem.

Learning with it ...

Speaking of function we are no strangers arrow arrow ES6 function is extended to function, convenient to use, there may be some small partners not particularly aware of the function of the arrow, so here to give you an example.

// 普通函数定义
function add(a, b) {
    return a + b;
}

// 箭头函数等价定义
const add = (a, b) => {
  return a + b;
}

// 普通匿名函数
fucntion() {
  console.log('hello');
} 

// 箭头函数等价定义
() => {
  console.log('hello');
}

Arrow function defined callback function used very much, but can not use the callback function of the callback function watch objects in the Vue, look at the following example:

Code is a little long, briefly explain do not see all of the code, the following code to achieve is to achieve change monitoring data a and b, and executes the corresponding callback function evaluation of a and b and when one change, with emphasis on 23 -30 line.

Watch the following code in the callback function is normal function, we know that for an ordinary function, the function of this points to the object where the function is running.

Therefore, when we change the value of a browser (e.g. browser console input vm.a = 10), code 23 is printed a line Vue object (i.e., 14 lines of code that the newly created instance vm ), as a function of operating function in the case of code lines 22 vm object, then the page will change from the original 3 becomes 12.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue中的watch</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{sum}}
  </div>

  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        a: 1,
        b: 2,
        sum: 3
      },
      watch: {
        a: function() {
                    console.log(this);
          this.sum = this.a + this.b;
        },
        b: function() {
          this.sum = this.a + this.b;
        }
      }
    })
  </script>

</body>
</html>

Let us look at the situation as a watch callback function with the arrow, the code was replaced with 21-29 lines of code:

watch: {
  a: () => {
    console.log(this);
    this.sum = this.a + this.b;
  },
    b: () => {
      this.sum = this.a + this.b;
    }
}

When this time we'll change the value of a console in the browser (such as in the console input vm.a = 10), you will find a print out of the window object, so the content of the page will not change.

JS code into the pre-analytical phase and the implementation phase, encountered a function declaration will be resolved in advance of the pre-pre-analytical stage, this time in the following code arrow function defined in the global, since var vm = new Vue({...})this code has not been performed in the pre-analytical phase . When the execution stage and changes the value of a console, watch the following function code arrow started, when the operating environment is really vm newly created object. But for the function of the arrow, the arrow points to the function of this object is an object where the function is defined, rather than run time, this ordinary function are very different.

  a: () => {
    console.log(this);
    this.sum = this.a + this.b;
  }

If the points for this question is not very clear if you can refer to the following two blog:

Finish

Please correct me

Why watch the chat Vue object callback function is not a function of the arrow?

Why watch the chat Vue callback object can not be a function of the arrow

Guess you like