大家在寫vue前後端交互時不知道有沒有碰到過一個問題，就是在data裏面定義一個變量，然後從後臺獲取數據後賦值給這個變量，但是對這個變量裏的對象的屬性或者數組的元素進行修改時，發現數據能修改，但視圖不更新！
原因：vue管理的變量必鬚生成了get和set方法，如data中定義的變量，雖然直接通過賦值的對象有get、set方法，但是對象裏面的屬性或者元素並沒有get和set方法，所以vue不會根據他的屬性改變去更新視圖
例子如下：
循環遍歷變量對象中的數組
定義一個沒有內容的變量
頁面初始化時，構造一個數據，並打印結果查看listData.data中的屬性是否有get和set方法
打印結果很明顯，data和name都有相應的get和set方法，但是data數組裏面的元素就沒有了
此時，寫一個方法去改變listData.data的元素值，並打印結果查看
很明顯，視圖沒有更新，但是打印結果中的元素值已經改變
解決辦法：
Vue提供了兩種方法去解決
1、Vue.set()
2、this.$set()
兩者區別在於，組件中可以直接使用this.$set()，如果使用Vue.set()，就要import Vue
參數有三個，第一個參數是對象或數組，如果是數組，第二個參數就是數組中的下標，如果是對象，第二個參數就是屬性名，第三個參數是修改的值
修改changeListData方法，如下
查看結果，發現視圖已更新
參考文檔：https://cn.vuejs.org/v2/guide/reactivity.html