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()

posted @ 2021-10-13 16:01  某星座的海星  阅读(537)  评论(0)    收藏  举报