关于Vue.set()和this.$set()引起的视图更新思考与注意点
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文探讨了在使用Vue.js框架时，Vue.set()和this.$set()方法对数据绑定的影响及其在触发视图更新中的作用，旨在帮助开发者正确理解和应用这些技术。
Vue文档中的列表渲染部分提到了一个注意事项：在某些情况下，数据虽然发生了变化但视图并未更新。
为了解决这个问题引入了`Vue.set()`方法。此外，还可以使用`this.$set()`方法，二者本质上是相同的，只是前者可以在methods中直接调用。
当使用`set`方法时会触发页面的全部重新渲染。例如，在一个包含数组数据的对象中：
```javascript
data() {
return {
arr: [1, 2, 3]
}
}
```
如果尝试对数组中的元素进行赋值操作，如 `arr[1] = b` ，Vue可能不会检测到这种变化并更新视图。然而，使用 `Vue.set(arr, index, value)` 方法可以确保数据改变被正确地追踪和响应。
例如：
```javascript
this.arr=[1,2,3]
this.arr[1]=b // 更改数组中的元素但不触发视图更新
console.log(this.arr) // 输出 [1,b,c]
Vue.set(this.arr, 2, c)
console.log(this.arr) // 正确输出为 [1,b,c]，并会触发视图更新。
```
全部评论 (0)
还没有任何评论哟~
