vue 中使用 this 更新資料的一次大坑

情景說明：

之前用 vue 做資料繫結更新時，發現一個莫名奇妙的問題。

我在 vue 例項中宣告瞭一個陣列屬性如 books: []，在非同步請求的回撥函式中使用 this.books = res.data.data; 進行資料更新，更新步驟後面緊跟著列印了 console.log(this.books)，列印資料顯示確實更新成功！但頁面資料渲染無論是 {{books.length}} 還是 {{books}} 都顯示沒有資料！！！

這就腦瓜子疼了，花了老長時間反覆證明了：this.books 資料肯定更新上去了，但它喵的 {{books}} 就是不顯示！

敲重點：我是在 axios 的回撥函式中使用的 this 更新資料！

最後想起了一個小細節，axios 非同步通訊的回撥函式我用的是函式表示式 axios({xxx}).then(function(res){xxx})，格式示例如下：

axios({
    url: url,
    method: "get",
    headers: {
        token: token
    }, //自定義請求頭資料傳遞token
    params: {
        userId: userId
    }
}).then(function(res) {
    //上面的回撥函式用的標準格式
	}
});  

使用這種格式的回撥函式寫法，如果在回撥函式中，使用 this，那麼，這個 this 就不是 vm(ViewModel) 物件了，而是回撥函式自身這個物件！！！

所以，使用這種回撥函式寫法，在回撥函式中，就不能使用類似 this.books 進行資料更新！只能使用 vm.books（vm 指的是建立 vue 例項物件時的引用或物件屬性名稱）來進行對 vue 物件資料的更新。

如果想使用 this 來實現資料更新，那就必須使用回撥函式的簡寫格式：axios({xxx}).then((res)=>{xxx})，格式示例如下：

axios({
    url: url,
    method: "get",
    headers: {
        token: token
    }, //自定義請求頭資料傳遞token
    params: {
        userId: userId
    }
}).then((res)=>{
    //上面的回撥函式用的簡寫格式
    }
});        

使用這種簡寫格式的回撥函式寫法，就可以直接在回撥函式中使用 this，此時，這個 this 也是 vm(ViewModel) 物件！！！

PS：好吧，這細節也是沒誰了，也怪我自己突然沒注意到，使用了標準格式的回撥函式寫法~

但是，話說 ，為什麼它喵的，使用標準格式寫法，this 指的不是 vue 例項物件，但是用它更新的資料如 this.books 也給更新上去了，列印出來也真的是一點毛病沒有？？？