解决vue数组中对象属性变化页面不渲染问题
做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染。
换了关键词搜索找到了相关方法。
其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触。
数组更新检测
变异方法
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你打开控制台,然后用前面例子的 items 数组调用变异方法:example1.items.push({ message: 'Baz' }) 。
替换数组
变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:
example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
注意事项
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:
// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题,你可以使用 splice:
example1.items.splice(newLength)
对象更改检测注意事项
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 vm.b = 2 // `vm.b` 不是响应式的
对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于:
var vm = new Vue({ data: { userProfile: { name: 'Anika' } } })
你可以添加一个新的 age 属性到嵌套的 userProfile 对象:
Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:
this.$set(this.userProfile, 'age', 27)
有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:
Object.assign(this.userProfile, { age: 27, favoriteColor: 'Vue Green' })
你应该这样做:
this.userProfile = Object.assign({}, this.userProfile, { age: 27, favoriteColor: 'Vue Green' })
以上这篇解决vue数组中对象属性变化页面不渲染问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue数组中对象属性变化页面不渲染问题
- vue 数组内对象修改属性页面不渲染问题
- Vue2.0 解决watch对象属性变化监听不到问题
- 解决Vue 通过下表修改数组,页面不渲染的问题
- Vue 改变数组中对象的属性不重新渲染View的解决方案
- Vue不能检测数组或对象变动问题的解决
- 快速解决js动态改变dom元素属性后页面及时渲染的问题
- 详解Vue改变数组中对象的属性不重新渲染View的解决方案
- 关于vue中watch检测到不到对象属性的变化的解决方法
- 详解vue 数组和对象渲染问题
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- 解决Vue不能检测数组或对象变动的问题
- 快速解决js动态改变dom元素属性后页面及时渲染的问题
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- 解决vue中对象属性改变视图不更新的问题
- Vue.js列表渲染难点:对象中数组深度更新问题
- 解决vue select当前value没有更新到vue对象属性的问题
- 解决vue 路由变化页面数据不刷新的问题
- Vue 通过下表修改数组,页面不渲染问题
- 解决Vue2.0 watch对象属性变化监听不到的问题