搜索
简帛阁>技术文章>Vue视图不更新问题,响应式对象

Vue视图不更新问题,响应式对象

由于Vue的更新机制,Vue.js 不能检测到对象属性的增、删。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

出现状况:当你更新对象的值时,对应的值更新了,但是在页面视图层上并没有更新,但当你再更新data里面的某个值时,视图上才随之更新。

 

//部分代码
//在data里面声明一个对象
isOpen: {}
//初始化后以id为键,状态为值形成对象,isOpen的值为
{ 30:false }
//通过点击事件去修改对应id的状态isOpen的值为
{ 30:true }
//更改之后视图上对象isOpen[30]的显示状态并未更新,再随便更新一个data的值后才更新,没有做到响应更新

原因:主要原因就是键没有在data中定义,导致初始化实例时将属性转为 getter/setter ,setter里面无法劫持到对象的这个属性发生变化,进而去发布通知,订阅者们接到通知后更新数据。

有五种解决方案: 
方案一:利用Vue.set(object,key,val)

例:Vue.set(app.obj,'k1','v1')

这个和方法二都是用set更新

方案二:利用this.$set(this.obj,key,val)

this.$set(this.obj,'k1','v1')

this.$set(this.isOpen,companyId,oldValue)

如果上面的set方法不行的话:

方案三:利用Object.assign({},this.obj)创建新对象

例: this.obj.k1='v1'; this.obj = Object.assign({}, this.obj) 或 this.obj = Object.assign({}, this.obj,{'k1','v1'})

change(companyId){

    const oldValue = !this.isOpen[companyId]
    var obj ={}
    obj[companyId] = oldValue
    this.isOpen = Object.assign({}, this.isOpen,obj)

}

方案四:使用…方法,数组或对象(推荐)

例:this.obj = [...this.obj] 或 this.obj = {...this.obj}

this.isOpen = {...this.isOpen}

方案五:使用 this.$forceUpdate() 进行强制更新

this.$forceUpdate();//要刷新的加一句这个就行

 

由于Vue更新机制,Vuejs不能检测到对象属性的增、删。因为Vuejs在初始化实例时将属性转为getter/setter,所以属性必须在data对象上才能让Vuejs转换它,才能让它是响应的。出现
当我们需要对vue里面data数据做动态更新。如下,实例化了Vue对象,其下vueData为data属性指向,现在我们需要由后台装载完整的data对象现在我们需要装载更新完整的data对象,常规的赋值
常规情况下我们在vue实例的data中设置响应数据。但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢?letvmnewVue{el:'app',data:{obj:{k
目录概述思路第一步统一封装更新函数第二步监听并触发视图更新引入Dep管家实现下语法糖vmodel概述前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化,但是当数据变化时,视图能够跟随数
一、vue如何追踪变化当你把一个普通的JS对象传给vue实例的data选项时,vue将遍历此对象的所有属性,并使用ObjectdefineProperty把这些属性全部转为getter/setter。
问题:赋给在data中对象新的值时,更新分析:由于Vue会在初始化实例时对属性执行getter/setter转化过程,所以属性必须在data对象上存在才能让Vue转换它,这样才能让它是响应的。解决
、为什么需要使用Vueset?vue中不能检测到数组和对象的两种变化:1、数组长度的变化vmarrlength42、数组通过索引值修改内容vmarr[1]‘aa’Vue$set(target,key
常规情况下我们在vue实例的data中设置响应数据。但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢?实例代码如下:letvmnewVue{el:'app',data:
1问题描述:在echarts弹框中嵌入echarts,在页面数据改变时,echarts视图更新;2解决办法:数据更新时以为drawLine()函数在updated()里面执行(这种情况之前碰到过),
最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定。2单向数据流与数据