在我們項(xiàng)目開發(fā)過程中，實(shí)例中的數(shù)據(jù)類型可以是對象、數(shù)組等。在對象中，某個(gè)屬性值發(fā)生更改時(shí)，我們可以通過對象的深度監(jiān)聽，以達(dá)到重新渲染頁面的需求。或者查閱這篇文章

例如：

<script> export default { data(){ return { objVal: { name: ’obj’, type: ’obj’ } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj(){ this.objVal.name = ’newobj’; } } }</script>

但是，在使用同一種方式進(jìn)行數(shù)組值更改監(jiān)聽時(shí)，這種做法是無效的。

<script>export default { data() { return { arrList: [1,2,3,4,5] }; }, watch: { arrList: { handler(val, oldval) { }, deep: true } }, methods: { changeArr() { // 無效 this.arrList[0] = 10; } }};</script>

上述用以監(jiān)聽數(shù)組值變化的方法是無效的，vue是不會(huì)響應(yīng)數(shù)據(jù)變化而重新去渲染頁面。在vue中僅需要通過修改賦值語句的方式，即可讓vue響應(yīng)數(shù)組數(shù)據(jù)的變化。具體操作如下：

使用方法：

// Vue.setVue.set(vm.items, indexOfItem, newValue)// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)

具體使用案例：

<script>export default { data() { return { arrList: [1,2,3,4,5] }; }, methods: { changeArr() { // this.arrList[0] = 10; // 修改為： this.arrList.splice(0, 1, 10); } }};</script>

或：

<script>export default { data() { return { arrList: [1,2,3,4,5] }; }, methods: { changeArr() { // this.arrList[0] = 10; // 修改為： this.$set(this.arrList, 0, 10); } }};</script>

以上兩種方式，均可達(dá)到監(jiān)聽數(shù)組值變化的效果。

補(bǔ)充知識(shí)：vue數(shù)組操作不觸發(fā)前端重新渲染

暫時(shí)使用給數(shù)組先賦值 [ ] ,然后重新賦值的方式解決。

此外，能夠監(jiān)聽的數(shù)組變異方法

https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95

還有就是set