中国站长,c2c网站类型,wordpress前台可发表文章,在网上做效果图的网站背景#xff1a;在vue开发中会遇到data数据更改后view试图不会进行响应式更新的情况 以下4种情况不触发vue响应式更新#xff01;#xff01; 不能检测到的数组变动是#xff1a; 1、当利用索引直接设置一个项时#xff0c;例如#xff1a;vm.items[indexOfItem] newVal…背景在vue开发中会遇到data数据更改后view试图不会进行响应式更新的情况 以下4种情况不触发vue响应式更新 不能检测到的数组变动是 1、当利用索引直接设置一个项时例如vm.items[indexOfItem] newValue 2、当修改数组的长度时例如vm.items.length newLength 不能检测到的对象变动是 3、向响应式对象添加属性 4、向响应式对象删除属性 代码demo效果如下
templatediv classhellodiv v-for(item,index) in students :keyindexspan姓名:{{item.name}} /span / span年龄:{{item.age}}/span / span索引:{{index}}/span/divhrspan v-for(prop,index) in oneTeacher :keyindex {{prop}} / /spanhrpbutton clickchangeArr()点击正常修改对象属性/button/pp视图无响应button clickindexChangeProp()点击使用索引修改数组内容/buttonbutton clicklengthChangeProp()点击更改对象length数组长度/buttonbutton clickaddProp()点击向响应式对象添加属性/buttonbutton clickdeleteProp()点击向响应式对象删除属性/button/phrp对应解决方法button clickchangeArr()js完全替换掉数组/buttonbutton clickmethodsChangeArr()使用JavaScript方法可以获取修改后返回的新数组/buttonbutton clicksetChangeprop()使用vue的set方法向响应式对象添加属性/buttonbutton clickdeletChangeprop()使用vue的delete方法向响应式对象删除属性/buttonbutton clickassignChangeprop()使用JS的Object.assign({},o1,o2)方法向对象添加属性/button/p/div
/templatescript
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 thatthis;that.students[{name:张三,age:18},{name:李四,age:18}]},//根据索引修改数组对象,视图没有更新indexChangeProp:function(){let thatthis;that.students[0]{name:王五,age:33};console.log(that.students);},//改变数组长度,视图没有更新lengthChangeProp:function(){let thatthis;that.students.length5;console.log(that.students);},//向响应式对象添加属性,视图没有更新addProp:function(){let thatthis;that.oneTeacher.studentNum100;console.log(that.oneTeacher);},//向响应式对象删除属性,视图没有更新deleteProp:function(){let thatthis;delete that.oneTeacher.age;console.log(that.oneTeacher);},//使用JavaScript的数组方法获取返回的数组methodsChangeArr:function(){let thatthis;let newStudent{name:小乔,age:16};that.students.push(newStudent);console.log(that.students);},//使用vue的set方法向响应式对象添加属性setChangeprop:function(){let thatthis;that.$set(that.oneTeacher,studentNum,200个学生);console.log(that.oneTeacher);},//使用vue的delete方法向响应式对象删除属性deletChangeprop:function(){let thatthis;that.$delete(that.oneTeacher,age);console.log(that.oneTeacher);},//assign()方法合并多个对象返回新的对象进而达到添加对象属性的效果assignChangeprop:function(){let thatthis,obj1,newObj;obj1{sex:男};//newObjObject.assign(that.oneTeacher,obj1); //无效并未替换原有对象newObjObject.assign({},that.oneTeacher,obj1);that.oneTeachernewObj;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
