在回调函数中访问“正确”的 this

[Dream4ever]

需求描述

Vue 的 methods 中调用了 axios 来向后端发送/请求数据，如何在 axios 的回调中访问 Vue 实例的数据（data）？

方案调研

用关键词 how to vue instance inside axios callback 进行 Google，第一个链接就是 Stack Overflow 上的提问，质量应该很高。
提问的网址：javascript - Accessing VUE JS's data from Axios - Stack Overflow。
点进去看，第一个最高票回答给出了在 axios 回调中访问 Vue 实例数据的三种方法：

方案一

创建对 Vue 实例的引用，比如 var self = this，然后在回调中访问。

知识点：以前经常见到 var self = this 的写法，一直不明白有什么用，这次遇到作用域的问题了，终于有点理解了。

方案二

回调函数写成箭头函数，就能直接在回调中访问 Vue 实例了。

知识点：又想起来在一些地方要求不能用箭头函数，也是跟作用域有关，看来需要注意箭头函数的作用域问题。

相关链接：Arrow functions - JavaScript | MDN

方案三

将 axios 用 bind 方法绑定到 Vue 实例上，axios.get().then().bind(this)。

知识点：以前读犀牛书看到 bind 方法，没有多深的体会，现在知道还可以这样用，涨姿势了。

相关链接：Function.prototype.bind() - JavaScript | MDN

拓展阅读

• this - JavaScript | MDN
• javascript - How to access the correct this inside a callback? - Stack Overflow