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 也給更新上去了，列印出來也真的是一點毛病沒有？？？

都看到最後了，右下角來個贊鴨！-.- 歡迎評論留言~