vue中触发更新检测的几种方案

方法一

在使用vue开发中大部分人应该都遇见过这种问题即数据明明发生了变化却没有触发视图的更新，这时候你可能各种尝试，比如把生命周期函数mounted()更改为created()，于是数据的重新绑定直接被你提前到new Vue()节点；或者你在你的数据重新赋值之前插入个alert()，直接粗暴触发更新检测，但明显我们不允许在页面中出现这个；又或者机智地使用个setTimeout(function(){},0)，但多测试几次，你会发现，我根本控制不了这个定时器是否一定触发，这特么到底是为什么。终于，碰了几次南墙，你想回头

究其原因是vue2的响应式原理是利用了ES5中的Object.defineProperty属性，它会对数据进行监控，但对数组的每一项都进行监控的话就会对性能产生影响，但问题又来了数组的更新检测如何触发呢，不要慌官方给出了解决方法，即他们对一些数组的方法进行了重写，我们可以使用这几种方法对数组进行修改从而触发更新检测

变种方法 push,shift,pop,splice,unshift,sort,reverse

方法二

如果还是无效那就只能使用vue自带的this.$set()方法了，它可以对数组或对象进行赋值并强制触发检测（局部强制刷新，这个比较常用）

this.$set(object,index,new);
Vue.set(object,index,new);
// 参数一：要改变的数组或对象
// 参数二：下标，或者元素名称
// 参数三：得到的新的值

方法三

this.$forceUpdate();
全局强制刷新，性能消耗较高不建议使用