之前我写过一篇 [已解决]TypeError: Cannot read property ‘xxx‘ of undefined报错情况分析

那篇报错说的是Cannot read ——“不能读取未定义的数据”
这个报错是Cannot set ——“不能设置未定义的数据”,也就是说你不能给未定义的数据赋值。

可以看到:如果一个变量a没有在data中定义,你这样去给它赋值: this.a = 'hello,world',是没有问题的。这说明跟 数据在不在data中定义 没啥关系。
在这里插入图片描述
在这里插入图片描述
问题在于this的指向

this.athis 指的是当前的vue对象。

你看看你的报错的那一行的this,是指向的是谁?(可以打印出来看看)

你的this.xxx = xx…是不是写在了 axios, promise , setInterval, setTimeout中?这些默认都是指向最外层的window,因为匿名函数中的this指向的是windows(看看最后那张图片51行输出的this)。

解决:

1、暂存this。let that = this; 在内部用that.a代替this.a
2、箭头函数。

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者——vue对象

匿名函数中的this指向的是windows,和全局变量一样。
在这里插入图片描述

在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐