vue

vue3或2中methods不能是箭头函数、this指向研究

不管是vue2.x还是vue3.x,官网都有说明 不应该使用箭头函数来定义 method 函数

为什么不能是箭头函数?

箭头函数作用域中不会绑定this,则不会指向实例(讲道理它本来也不会指向实例,为什么会指向实例?为什么实例上会有methods下定义的方法呢?下面会探讨)

如果是箭头函数this指向哪?

我们在methods定义一个非箭头函数的方法,再强行定义一个箭头函数方法,打印出this,发现:
1、箭头函数的方法中this指向的是window
2、非箭头函数的方法指向一个代理对象Proxy(这是vue3的,下面会探讨2与3的指向)

其实这里的箭头函数指向window,应该是能够理解的,箭头函数不会绑定this,则这里的this会找它上层作用域的this指向,而它上层作用域便是script便签内作用域(window)

注意:中间的很多花括号并非作用域!

为什么不是箭头函数指向的是一个Proxy对象?

不是箭头函数的时候vue2.x与vue3.x是有区别的,区别在于它们的监听原理,vue2使用的Object.defineProperty(),vue3.x使用的Proxy代理。
1、vue2.x中this指向的是经过Object.defineProperty()监听处理的vue应用实例。
2、vue3.x中this指向的是经过Proxy代理监听处理的vue应用实例。

为什么会指向实例?为什么可以使用this.xxx执行方法?

这里就要看源码了,源码里我标了注释。

之所以会指向实例,是vue内部使用bind方法为我们定义的每一个methods都重新绑定了一个publicThis,并将返回的新方法赋值给了vue实例,实际上我们在使用this.xxx的时候用的就是vue内部处理过后放到实例上的xxx方法。

75条评论

Leave a Reply

邮箱地址不会被公开。