问题：在页面加载时使用axios发生aiax请求后端数据，并将数据赋值到vue中的实例中，在赋值的过程中使用this赋值，浏览器没有报错，但是请求到的数据没有赋值到vue实例中的原因

---

1.比如说我下面这个列子

现有页面main.html，当SpringBoot启动类启动时，我们去访问这个页面，在页面被访问时向后端请求数据，获取到数据赋值到vue的实例中 (采用this)

前段vue代码：

 <script>
   			//在此我将这个vue对赋值给了变量vm
        var vm = Vue({
            el : "#app",
            data : {
                goods : []
            },
            methods : {
                getData(){
                    axios.get("/selectGoods")
                        .then(function (value) {
                      			console.log(value)
                      			console.log("-----------------------------")
                      			console.log("vue对象：" + vm)
                            console.log("-----------------------------")
                            console.log("this："+this)
                            //TODO 在此处使用this为vue中data实例赋值
                            this.user = value.data
                        }).catch(function (reason) {
                            console.log(reason)
                    })
                }
            },
            created(){
              	console.log("this："+this)
                this.getData()
            }
        })
    </script>

main.html页面（没有展示数据）

---

getData()方法是在vue创建完成时被调用的，在方法执行完后，我分别在请求成功的函数中打印后台传过来的值，vue对象，和this如下图所示：

1.后台返回的对象信息：

2.vue对象信息：

3.axios请求成功中的this对象：

4.created中的this对象：

---

看图分析结果

1.根据浏览器控制台打印信息可以很明显看到后端有将数据传过来

2.在浏览器控制台中可以看到vue实例中的方法（getData()）和属性（goods 可以数据，this赋值失败）

3.可以很明显的看到this代表的不是当前vue对象，这个对象而是window

---

结论

vm即是当前vue对象实例，created下的函数this指向的是当前创建的vue实例，而在这些函数内部使用例如axios与后台交互后回调函数的内部的this并非指向当前的vue实例，若想拿到后台回传的数据更新data里的数据，不能在回调函数中直接使用this，而要用在外部函数定义的变量存储的this，也就是当前vue的实例

---

更改

方式一：直接使用vue实例的当前对象 vm

<script>
        var vm = new Vue({
            el : "#app",
            data : {
                goods : []
            },
            methods : {
                getData(){
                    axios.get("/selectGoods")
                        .then(function (value) {
                            vm.goods = value.data
                        }).catch(function (reason) {
                            console.log(reason)
                    })
                }
            },
            created(){
                this.getData()
            }
        })
    </script>

方式二：在函数外部定义变量储存this（当前vue对象）

<script>
        var vm = new Vue({
            el : "#app",
            data : {
                goods : []
            },
            methods : {
                getData(){
                    //TODO 在此定义变量记录当前vue对象（this）
                    var giveThis = this
                    axios.get("/selectGoods")
                        .then(function (value) {
                            giveThis.goods = value.data
                        }).catch(function (reason) {
                            console.log(reason)
                    })
                }
            },
            created(){
                this.getData()
            }
        })
    </script>

---

修改后页面显示的数据