不要在watch或method里面使用箭头函数定义watcher或方法

注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。 先说原因

1.在标准函数中this引用的是把函数当成方法调用的上下文

2.在箭头函数中this引用的是定义箭头函数的上下文

换句话说就是标准函数中this的确定是跟调用那个函数的上下文有关，而箭头函数的this确定是跟定义箭头函数的上下文有关

所以会出现这样的问题

代码语言：javascript复制

 watch:{
   score: (newVal)=>{
     console.log("箭头函数的this")
     console.log(this) //undefined
   }
 },

代码语言：javascript复制

 watch:{
   score: function(newVal){
     console.log("标准函数的this")
     console.log(this)  //VueComponent
   }
 },

jqueryui

0 人点赞