背景：在vue開發中會遇到data數據更改后view試圖不會進行響應式更新的情況

?

以下4種情況不觸發vue響應式更新！！

?

?? 不能檢測到的數組變動是：

? ? 1、當利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue；

? ? 2、當修改數組的長度時，例如：vm.items.length = newLength；

?? 不能檢測到的對象變動是：
? ? 3、向響應式對象添加屬性；

? ? 4、向響應式對象刪除屬性；

?

?

代碼demo效果如下

<template><div class="hello"><div v-for="(item,index) in students" :key="index"><span>姓名:{{item.name}} </span> / <span>年齡:{{item.age}}</span> / <span>索引:{{index}}</span></div><hr><span v-for="(prop,index) in oneTeacher" :key="index"> {{prop}} / </span><hr><p><button @click="changeArr()">點擊正常修改對象屬性</button></p><p>視圖無響應：<button @click="indexChangeProp()">點擊使用索引修改數組內容</button><button @click="lengthChangeProp()">點擊更改對象length數組長度</button><button @click="addProp()">點擊向響應式對象添加屬性</button><button @click="deleteProp()">點擊向響應式對象刪除屬性</button></p><hr><p>對應解決方法：<button @click="changeArr()">js完全替換掉數組</button><button @click="methodsChangeArr()">使用JavaScript方法可以獲取修改后返回的新數組</button><button @click="setChangeprop()">使用vue的set方法向響應式對象添加屬性</button><button @click="deletChangeprop()">使用vue的delete方法向響應式對象刪除屬性</button><button @click="assignChangeprop()">使用JS的Object.assign({},o1,o2)方法向對象添加屬性</button></p></div> </template><script> export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App',students:[{name:"張三",age:27},{name:"李四",age:29}],oneTeacher:{name:"諸葛孔明",age:1000}}},methods:{//該函數中直接進行了數組替換，大量數據處理時不合適changeArr:function(){ let that=this;that.students=[{name:"張三",age:18},{name:"李四",age:18}]},//根據索引修改數組對象,視圖沒有更新indexChangeProp:function(){let that=this;that.students[0]={name:"王五",age:33};console.log(that.students);},//改變數組長度,視圖沒有更新lengthChangeProp:function(){let that=this;that.students.length=5;console.log(that.students);},//向響應式對象添加屬性,視圖沒有更新addProp:function(){let that=this;that.oneTeacher.studentNum=100;console.log(that.oneTeacher);},//向響應式對象刪除屬性,視圖沒有更新deleteProp:function(){let that=this;delete that.oneTeacher.age;console.log(that.oneTeacher);},//使用JavaScript的數組方法獲取返回的數組methodsChangeArr:function(){let that=this;let newStudent={name:"小喬",age:16};that.students.push(newStudent);console.log(that.students);},//使用vue的set方法向響應式對象添加屬性setChangeprop:function(){let that=this;that.$set(that.oneTeacher,"studentNum","200個學生");console.log(that.oneTeacher);},//使用vue的delete方法向響應式對象刪除屬性deletChangeprop:function(){let that=this;that.$delete(that.oneTeacher,"age");console.log(that.oneTeacher);},//assign()方法合并多個對象返回新的對象進而達到添加對象屬性的效果assignChangeprop:function(){let that=this,obj1,newObj;obj1={sex:"男"};//newObj=Object.assign(that.oneTeacher,obj1); //無效，并未替換原有對象newObj=Object.assign({},that.oneTeacher,obj1);that.oneTeacher=newObj;console.log(that.oneTeacher);},} } </script>

?

解決方法總結：

1、創建新的數組替換原有數組值

2、使用JavaScript的數組操作函數，這些方法都會返回一個新數組，也是數組替換原理；

3、使用vue自帶的 vue.set(object , key , value );?向響應式對象添加屬性；

4、使用vue自帶的 vue.delete(object , key );?向響應式對象刪除屬性；

5、對象添加屬性還可以使用Object.assign({},obj1,obj2)返回獲取的新對象替換原有對象；

注意：注意對象不能是 Vue 實例，或者 Vue 實例的根數據對象。

?

??

?

參考網址：vuejs API ：https://cn.vuejs.org/v2/api/#Vue-set

?

?

?

?

?

?

?

?

?

?

?

?

?

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue数组修改不触发视图更新、vue向响应式对象添加或删除属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。