Vue中对象或数组数据更新但视图不刷新问题的解决策略

简介: Vue中对象或数组数据更新但视图不刷新问题的解决策略

我们知道在vue中,数据的绑定都不用我们操心,例如在data中有一个 msg 的变量,你修改它,那么在页面上,msg 的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,或者直接把数组的 length 变成0,vue就无法知道发生了改变。


一、对象不响应

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

//原始数据
data: {
    list:[
        {
            name:'张三',
            age:18
        },
        {
            name:'李四',
            age:19
        }
    ]
}

//增加性别属性
change() {
    this.list[1].sex = '男';
},

//清空数组
clear() {
    this.list.length = 0;
}

上面的写法没有效果,是因为没有按照vue的规范去写,因为vue文档里面写了,对于深层的,最好用$set方法,这样vue就可以知道发生了变化,同时vue也不建议直接修改length,可以给一个空数组来置空。

1、this.$set方法

对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

//增加性别属性
change() {
    this.$set(this.list[1],'sex','男')
},

//清空数组
clear() {
    this.list=[];
}
2、$forceUpdate方法

可是如果我们不想利用 $set 去设置,非要按照我们第一种方式去写,可以实现么?

答案是可以的,就是利用 $forceUpdate 了,

因为你修改了数据,但是页面层没有变动,说明数据本身是被修改了,但是vue没有监听到而已,用$forceUpdate就相当于按照最新数据给渲染一下。

//增加性别属性
change() {
    this.list[1].sex = '男';
    this.$forceUpdate();
},

//清空数组
clear() {
    this.list.length = 0;
    this.$forceUpdate();
}


二、数组不响应

Vue 不能检测以下数组的变动:

  • 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时,例如:vm.items.length = newLength
//原始数据
data: {
    items: ['a', 'b', 'c']
}

//更新数组值
change() {
    this.items[1] = 'd';
},

//更改数组长度
updata() {
    this.items.length = 2;
}

以上方法不会触发数据响应式,视图不更新。

//原始数据
data: {
    items: ['a', 'b', 'c']
}

//更新数组值
change() {
   this.$set(this.list,1,'d')
   this.list.splice(1,'d');
},

//更改数组长度
updata() {
    this.list.splice(2);
}

上面的方法都都可以实现,同时也将在响应式系统内触发状态更新。


三、$nextTick 和 $forceUpdate的区别

this.$nextTick() 将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它, 然后等待 DOM 更新。


this.$forceUpdate() 迫使Vue实例重新(rander)渲染虚拟DOM,注意并不是重新加载组件。


结合vue的生命周期,调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数,


不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。


目录
相关文章
|
2天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
2天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
8天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
12天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
10天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
28 9
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
8天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
8天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
9天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。