木材模板.网站,实际缴纳多少,黑龙江省建设教育信息网网站,上海 房地产网站建设最近使用vue开发时#xff0c;在一个函数中使用for循环#xff0c;改变了页面中的数组#xff0c;在函数中查看是修改成功的#xff0c;但是页面中没有动态刷新。在Vue的官方文档有提到这样一个注意事项#xff1a;数组变更检测注意事项#xff1a;由于 JavaScript 的限制…最近使用vue开发时在一个函数中使用for循环改变了页面中的数组在函数中查看是修改成功的但是页面中没有动态刷新。在Vue的官方文档有提到这样一个注意事项数组变更检测注意事项由于 JavaScript 的限制Vue 不能检测以下数组的变动当你利用索引直接设置一个数组项时例如vm.items[indexOfItem] newValue当你修改数组的长度时例如vm.items.length newLength举个例子var vm newVue({data: {items: [a, b, c]}})vm.items[1] x //不是响应性的vm.items.length 2 //不是响应性的也就是说直接设置数组的某一项的值虽然改变了数组的值但视图上显示的仍为数组之前的值数据的响应失效了。出现这种现象的根本原因是什么呢首先我们先来了解vue数据响应的原理。官方文档的解释当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项Vue 将遍历此对象所有的属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter。也就是说当改变data中属性的值时会触发其相应setter的调用从而实现响应的操作。但getter和setter是有局限性的。我们先来看下面的这个例子var person {};Object.defineProperties( person, {age: {defaultValue:11,get:function() {return this.defaultValue;},set:function(val) {this.defaultValue val;console.log(触发了set)}}});//修改属性的值时能够触发setperson.age 12 //触发了set-触发了set-12person.age-12//将属性的值设置为一个数组当通过索引值修改数组的某一项或使用数组的某些方法修改数组时不能触发setperson.age [2,3,4] //触发了set-触发了set-(3) [2, 3, 4]person.age[2] 5 //未触发set-5person.age-(3) [2, 3, 5]person.age.push(5) //未触发set-4person.age-(4) [2, 3, 4, 5]//将属性的值设置为一个对象当修改对象中某属性的值时无法触发setperson.age { first: 1}-触发了set-{first: 1}person.age.first 2 //未触发set-2通过上述例子可以观察得出当该属性的值为一个数组时通过索引修改数组某一项的值或使用数组的某些方法修改数组并不能触发set当属性的值为一对象时直接修改对象中属性的值时也无法触发set。为了解决当你利用索引直接设置一个数组项问题以下两种方式都可以实现和 vm.items[indexOfItem] newValue 相同的效果同时也将在响应式系统内触发状态更新//Vue.setVue.set(vm.items, indexOfItem, newValue)//Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)你也可以使用 vm.$set 实例方法该方法是全局方法 Vue.set 的一个别名vm.$set(vm.items, indexOfItem, newValue)为了解决当你修改数组的长度问题你可以使用 splicevm.items.splice(newLength)对象变更检测注意事项还是由于 JavaScript 的限制Vue 不能检测对象属性的添加或删除var vm newVue({data: {a:1}})//vm.a 现在是响应式的vm.b 2//vm.b 不是响应式的对于已经创建的实例Vue 不允许动态添加根级别的响应式属性。但是可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如对于var vm newVue({data: {userProfile: {name:Anika}}})当修改对象的属性或为对象添加属性时应该使用以下方法Vue.set(vm.userProfile, age, 27)或者vm.$set(vm.userProfile, age, 27)有时你可能需要为已有对象赋值多个新属性比如使用 Object.assign() 或 _.extend()。在这种情况下你应该用两个对象的属性创建一个新的对象。所以如果你想添加新的响应式属性不要像这样Object.assign(vm.userProfile, {age:27,favoriteColor:Vue Green})你应该这样做vm.userProfile Object.assign({}, vm.userProfile, {age: 27,favoriteColor: Vue Green})由于数据响应原理机制 Vue 不允许动态添加根级响应式属性所以你必须在初始化实例前声明所有可能用到的根级响应式属性且为这些属性都设一个初值哪怕只是一个空值。回归正题我项目中遇到的这个问题解决方法1. 运用this.$forceUpdate()强制刷新。2. 使用vm.$set(vm.items, indexOfItem, newValue)eg. vm.$set(vm.dataList[i], picUrl, data:image/jpg;base64, response.data)export default{data() {return{dataList:[],};},methods: {getData() {var _this this;var dataList [];dataListresponse.data.data;for(var i0;i_this.downloadBase64(dataList[i].fielID, i, dataList);}},downloadBase64(fielID, i, dataList) {var vm this;$.ajax({url: AppInter.downloadBase64,asysc:true,data: {fileName:1.jpg,fileId: fielID},cache:!0,timeout:2e4,dataType:json,type:POST,xhrFields: {withCredentials:!0},crossDomain:!0,contentType:application/x-www-form-urlencoded;charsetUTF-8,beforeSend:function() {vm.loadingweui.loading();},success:function(response) {if (response.responseCode 0) {dataList[i].picUrl data:image/jpg;base64, response.data;vm.dataList dataList;vm.$forceUpdate();}else{weui.alert(请求错误请稍候再试, function() {}, {title:温馨提示});}},error:function(xhr, msg, err) {weui.alert(请求失败请稍候再试, function() {}, {title:温馨提示});},complete:function() {if(vm.loading.hide) {vm.loading.hide();}}})}},created() {},mounted() {}};
