1. 问题引入

最近在写微信小程序的前端页面，其中涉及到了数据的交互。在数据更新完毕后，我想在控制台把对象打印出来查看数据状态，于是我写出了如下代码：

结果控制台直接输出undefined

对象的定义如下

这时我便来了兴致：this指针到底指向什么？如何才能获得academies对象呢？为什么在基于Vue的web前端开发时，可以直接在Vue实例的普通函数中使用this指向数据？于是我开始了探索。

2. 问题探究

2.1. 微信小程序中的this

先直接输出this

随后得到一个Vo对象，注意到里面含有一个data成员

点击打开data成员，发现它就是一个包含了我定义数据的对象，即代码中的data对象

所以要想在代码中获取academies对象，只需要写成this.data.academies即可

打印输出的结果

2.2. Vue中的this

Vue中的this指向当前组件或Vue的实例对象。实际上，在Vue中也是通过this.data或this._data的方式来访问data对象中的成员。但在Vue框架的底层对this作了特别的封装和优化，从而可以在 Vue实例对象直接管理的普通函数中，直接通过this来访问data中的数据成员。所以其本质没变，之不过底层的封装提供了更便利的方法。

3. 问题结论

在微信小程序开发中，如果要访问到data对象中的数据成员（比如member），要通过this.data.member的方式进行访问（但this.setData中key值等特殊情况不需要）。Vue的本质也是类似，之不过Vue的底层通过封装提供了更便利的方法。

4. 心得

之前搞前端都是在用Vue搞web前端，现在搞微信小程序的前端，思维有时候有些转换不过来；而且都是在搞后端之余搞的前端，基础不扎实。未来还是要打好基础，多学习，多思考，多对比，区分好各种情境下前端开发的异同点。