vue视图不更新的情况
Q: 在使用element的日历组件时,发现vue代码里改动model绑定的值,但是视图没有刷新。可是网页开F12调试,直接利用Vue调试插件改model绑定的值就可以刷新。
A: 先说最后查到的Bug结论--->利用索引直接设置一个项时,Vue 不能检测到变动的数组,换用push、pop命令后,DateTimePicker就绑定上数据了。
下面是整理的一些vue视图不更新的原因
参考页1:vue视图不更新的情况
参考页2:vue中使用element DateTimePicker,数据绑定不上
参考页3!!!:Vue官网-检测变化的注意事项
-----------我是分割线,摘抄开始---------------
视图不更新情况一
数组有些方法操作时,无法检测到,包括
- 当利用索引值直接设置一个项 如
items[0] = newValue
- 当修改数组的长度时 如
items.length = newLength
可以检测到的有:
-
push、pop、shift、unshift、splice、sort、reverse
-
filter、concat、slice这些不会改变原始数组,但总是返回一个新数组,当使用非变异方法时,可以用新数组替换旧数组
视图不更新情况二
Vue 不能检测到对象属性的添加或删除
由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的
var vm = new Vue({
data: {
a: 1
}
})
// vm.a 是响应的
vm.b = 2
// vm.b 是非响应的
解决办法:
this.$set(obj,key,value)
或者Vue.set(obj,key,value)
有时你想向一个已有对象添加多个属性
例如使用 Object.assign()
或 _.extend()
方法来添加属性。但是,这样添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) // 深拷贝
视图不更新情况三
异步更新问题
你渲染的数据是你上一次选择的数据,并不是本次选择的数据,俗称“慢一拍”
解决方法
$this.nextTick()