Vue之修改数据页面不更新的问题
第一种场景
动态给对象新增属性或者删除属性是不会触发视图刷新的，Vue识别不到：
第二种场景
通过数组下标修改数组中的元素或者手动修改数组的长度，Vue识别不到：
解决方法1
静默刷新(使用v-if的特性)
在修改值之后将元素销毁，然后在修改后的下一次DOM渲染完成时再显示出来，这样就会触发组件重新加载data的数据进行渲染，data中被修改的数据才是最新的
解决方法2
Vue.$set(官方推荐)
官方对这个API的解释就是使用这个api修改的数据会为其添加响应式getter和setter让其拥有数据响应的特性
vm.$set(要操作的对象或数组, 要新增或者修改的数组或对象key, 对应的值)
解决方法3
Vue.$forceUpdate(手动强制更新视图)
因为Vue修改数据是异步执行的，所以视图不会立即更新，会等到下一次dom更新循环结束后统一更新发生在这一次循环中修改的数据，然后同步视图更新，所以我们可以修改后自己手动强制更新视图
解决方法4
Object.assign(使用修改栈能触发视图更新的特性，借鉴React的写法)
我们都知道Object.assign能拷贝合成一个新对象，所以我们只需要将要修改的值合并成一个新对象然后赋值给data中的对象或数组，这样栈的指向被修改了.触发视图更新
解决方法5
对于数组还可以使用splice方法(Vue对于数组的操作能识别变化的api包括splice):
this.arr.splice(你要修改的元素索引位置，1，修改后的值) 这是修改操作
- 示例：修改a
this.obj.splice(0, 1, {
a: 456
});this.arr.splice(你要添加到哪个元素的前面就写那个元素的索引+1，0，要添加的值) 这是添加操作
- 示例：添加b
this.obj.splice(1, 0, {
b: 456
});this.arr.splice(你要删除的元素索引，1) 这是删除操作
- 示例：删除a
this.obj.splice(0, 1);
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了浅谈Vue DIFF，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
Vue2中路由传参数:props(父传子),$emit与v-on(子传父),EventBus(兄弟传参),.sync与update:(父子双向),v-model(父子双向),ref $children与$parent,$attrs与$listeners(爷孙双向),provide与inject(多层传参),Vuex,Vue.prototype,路由,浏览器缓存,window,$root,slot(父传子)2024-08-08
Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑，你应该使用计算属性。这篇文章我们将一起学习vue.js的计算属性。什么是计算属性，为什么要用这东西呢？通过下面这篇文章你将解决这些问题，下面来一起看看吧。2016-09-09
这篇文章主要介绍了vue 自定义内置组件 select的相关知识，整合了第三方jquery 插件select2,具体实例代码大家参考下本文2018-04-04
这篇文章主要介绍了vue中使用keep-alive动态删除已缓存组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vxe-table中vxe-grid中的合并单元格方式(合并行、列)
这篇文章主要介绍了vxe-table中vxe-grid中的合并单元格方式(合并行、列),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要为大家详细介绍了vue+elementUI实现点击按钮互斥效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在实际的Vue开发中,我们经常需要在多个组件之间共享一些工具函数或类,比如格式化日期、处理字符串、操作数组等,本文将详细介绍如何在Vue实例上挂载自己定义的工具类,并在项目中高效使用这些工具,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue3中的hooks总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue单个组件实现无限层级多选菜单的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
最新评论