[vue] watch的属性用箭头函数定义结果会怎么样?
Activity
yin-pathfinder commentedon Jun 28, 2019
this为undefined
lovelmh13 commentedon Jun 28, 2019
this是undefined,要更改的属性会报TypeError错误, Cannot read property 'xxx' of undefined
shanyanwt commentedon Jul 2, 2019
因为箭头函数默绑定父级作用域的上下文,所以不会绑定vue实例,所以 this 是undefind
xindiyang commentedon Sep 11, 2019
不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。
hyj443 commentedon Oct 19, 2021
下面从源码角度分析一下:
我们配置的watch选项,所写的处理函数会创建watcher实例,把处理函数挂载给watcher,方法名叫cb。
下面这个run方法是watcher的原型方法,被观测的目标发生变化时,即你watch的属性变化时,它会通知它的dep中所有的watcher,执行update,然后立即执行下面这个run,重新计算你watch的属性的值,再次进行依赖收集,如果求出的新值和旧值不一样了,那么会执行cb,如下所示
那么问题来了,如果cb不是箭头函数,那么它.call执行,执行时的this是能指定vm实例的
源码就是这么做,才把配置的函数中的this指向了vm实例
但如果是箭头函数,情况就不一样了,看下面例子。
可见,你是无法将箭头函数执行中的this改绑定的,它只能从上级上下文去取this