Vue数据更新了但页面没有更新的 7 种情况汇总及延伸

Vue数据更新但页面没有更新的7种情况的总结和扩展，所以属性必须存在于数据对象上，Vue才能将其转换为响应式。Scene:varvm=newVue({data:{},//页面不会变化template:'

'})vm.message='Hello!'//`vm.message`不是响应式解决方案：varvm=newVue({data:{//declareaandbareanemptystringmessage:'',},template:''})vm.message='你好！'2.Vue无法检测对象属性的增减原因：官方-由于JavaScript（ES5）的限制，Vue.js无法检测对象属性的增减。因为Vue.js在初始化实例时会将属性转换为getters/setters，所以属性必须在数据对象上，以便Vue.js对其进行转换，使其具有响应性。Scene:varvm=newVue({data:{obj:{id:001}},//页面不会变化template:''})vm.obj.message='hello'//Notresponsivedeletevm.obj.id//不是无响应解决方案：//Dynamicadd-Vue.setVue.set(vm.obj,propertyName,newValue)//Dynamicadd-vm.$setvm.$set(vm.obj,propertyName,newValue)//动态添加多个//替换`Object.assign(this.obj,{a:1,b:2})`this.obj=Object.assign({},this.obj,{a:1,b:2})//动态移除-Vue.deleteVue.delete(vm.obj,propertyName)//动态移除-vm.$deletevm.$delete(vm.obj,propertyName)3.Vue无法检测到使用数组索引直接修改数组项原因：官方-由于JavaScript的限制，Vue无法检测到数组和对象的变化；优玉玺——性能成本与用户体验不成正比。场景：varvm=newVue({data:{items:['a','b','c']}})vm.items[1]='x'//不是响应式解决方案：//Vue.setVue.set(vm.items,indexOfItem,newValue)//vm.$setvm.$set(vm.items,indexOfItem,newValue)//Array.prototype.splicevm.items.splice(indexOfItem,1,newValue)扩展名：对象.defineProperty()可以监听到数组的变化，但是给数组增加一个属性（索引）是检测不到数据变化的，因为新加入的数组的下标（索引）是监听不到的，对于删除属性（索引）。场景：vararr=[1,2,3,4]arr.forEach(function(item,index){Object.defineProperty(arr,index,{set:function(value){console.log('triggersetter')item=value},get:function(){console.log('triggergetter')returnitem}})})arr[1]='123'//triggersetterarr[1]//triggergetter返回值为"123"arr[5]=5//不会触发setter和getter4.Vue无法监听直接修改数组长度的变化原因：官方-由于JavaScript的限制，Vue无法检测到数组和对象的变化;游鱼溪——性能成本与获得的用户体验是不成正比的。(Object.defineProperty()可以监听数据变化)Scene:varvm=newVue({data:{items:['a','b','c']}})vm.items.length=2//无响应解决方案：vm.items.splice(newLength)5.执行异步更新前操作DOM数据不会改变原因：Vue在更新DOM时是异步执行的。只要检测到数据变化，Vue就会打开一个队列，缓冲所有发生在同一个事件循环中的数据变化。如果同一个观察者被多次触发，它只会被推入队列一次。这种缓冲时的重复数据删除对于避免不必要的计算和DOM操作非常重要。然后，在下一个事件循环“tick”中，Vue刷新队列并执行实际（去重）工作。Vue内部尝试使用原生的Promise.then、MutationObserver和setImmediate来实现异步队列。如果执行环境不支持，它将使用setTimeout(fn,0)代替。场景：{{message}}