解决vue数据改变视图不改变问题及$set、$forceUpdate()的用法详解

解决vue数据改变视图不改变问题及$set、$forceUpdate()的用法详解

1.为什么数据改变视图不变

vue视图中数据的渲染和更新是根据双向绑定实现的， 但有些情况下双向绑定是失效的，

以下几种情况双向绑定会失效：

1.利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2.修改数组的长度时，例如：vm.items.length = newLength
3.由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除

2.解决方法

方法一：.使用$set

数组：this.$set(Array, index, newValue)
对象：this.$set(Object, key, value)

方法二： 使用$forceUpdate()强制更新视图

this.$forceUpdate()

1、主要用来解决强制刷新视图和数据。
2、结合vue生命周期，调用$forceUpdate后会触发beforeUpdate和updated这两个钩子函数，不会触发其他钩子函数。

⚠️注意：
$forceUpdate需要谨慎使用。原因：
它会强制整个组件的渲染，如果频度没有控制好，会一直渲染，导致应用性能变得很低！！