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