vue2怎么监听对象,数组的变化
时间: 2024-04-10 22:21:45 浏览: 6
在 Vue2 中,可以使用 Vue 的响应式系统来监听对象和数组的变化。具体方式如下:
1. 对象监听:使用 `Vue.set()` 或 `vm.$set()` 方法来添加响应式属性。
```javascript
// 示例对象
let obj = {
name: 'Tom',
age: 18
}
// 添加响应式属性
Vue.set(obj, 'gender', 'male')
// 或
this.$set(this.obj, 'gender', 'male')
```
2. 数组监听:使用数组变异方法来修改数组。
```javascript
// 示例数组
let arr = [1, 2, 3]
// 修改数组
arr.push(4)
arr.splice(1, 1, 5)
// 如果需要监听数组中非变异方法的改变,可以使用 Vue.observable() 方法
let observableArr = Vue.observable(arr)
```
另外,Vue2 还提供了 `watch` 监听器,可以监听对象或数组中某个属性的变化。
```javascript
// 监听对象中 name 属性的变化
this.$watch('obj.name', function(newValue, oldValue) {
console.log('obj.name changed from', oldValue, 'to', newValue)
})
// 监听数组中第一个元素的变化
this.$watch('arr[0]', function(newValue, oldValue) {
console.log('arr[0] changed from', oldValue, 'to', newValue)
})
```