.Vue 如何检测数组变化?
时间: 2023-11-25 11:04:30 浏览: 45
Vue 可以通过监听数组的变化来实现响应式更新。
Vue 内置了一个观察数组的方法 `$watch`,可以用来监听数组的变化。当数组发生变化时,Vue 会自动更新视图。
代码示例:
```javascript
var vm = new Vue({
data: {
arr: [1, 2, 3]
},
watch: {
arr: function(newVal, oldVal) {
console.log('数组变化了', newVal, oldVal);
}
}
});
vm.arr.push(4); // 控制台输出 "数组变化了 [1, 2, 3, 4] [1, 2, 3]"
```
除了使用 `$watch` 监听数组变化,还可以使用 Vue 提供的数组变异方法来修改数组,这些方法会自动触发响应式更新。
常见的数组变异方法包括:
- `push()`: 在数组末尾添加一个或多个元素。
- `pop()`: 删除并返回数组的最后一个元素。
- `shift()`: 删除并返回数组的第一个元素。
- `unshift()`: 在数组开头添加一个或多个元素。
- `splice()`: 删除或添加数组的元素。
- `sort()`: 对数组元素进行排序。
- `reverse()`: 反转数组的元素顺序。
代码示例:
```javascript
var vm = new Vue({
data: {
arr: [1, 2, 3]
}
});
vm.arr.push(4); // 视图会自动更新,显示 [1, 2, 3, 4]
vm.arr.splice(1, 1, 5); // 视图会自动更新,显示 [1, 5, 3, 4]
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)