vue使用什么来监听数据变动 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue使用响应式原理来实现监听数据的变动。

具体来说，Vue采用了Object.defineProperty()方法，通过劫持对象的属性，使得当该属性被读取或修改时，可以触发相应的回调函数，从而实现对数据的监听。

在Vue中，通过将data中的属性添加到Vue实例的代理对象中，从而实现了数据的响应式。当data中的数据发生变化时，Vue会自动检测到变化，并触发相应的更新操作，保证视图与数据的同步更新。

需要注意的是，Vue只能监听已经被添加到代理对象中的属性，对于新增的属性，Vue无法进行监听。因此，如果需要监听新增属性的变动，可以使用Vue提供的$set()方法来手动添加属性，并且将其置为响应式。

除了使用Object.defineProperty()方法实现数据的监听外，Vue还提供了watch属性和computed属性来监听数据的变动。通过watch属性，可以监听指定数据的变化，并在回调函数中执行相应的操作。而computed属性，则是一种依赖于其他数据的计算属性，当依赖的数据发生变化时，computed属性会自动重新计算。

综上所述，Vue通过响应式原理、watch属性和computed属性来实现对数据变动的监听。这种机制使得数据的变化能够被自动捕捉到，并及时更新到视图中，从而实现了数据驱动的页面展示。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，可以使用Vue实例的$watch方法来监听数据的变动。

$watch方法：
Vue实例提供了一个$watch方法，可以用来监听数据的变动。$watch方法接收两个参数：要监听的数据的表达式和回调函数。当数据发生变动时，回调函数会被触发。
```
// 监听数据的变动
this.$watch('data', function(newValue, oldValue) {
  // 数据发生变动时的处理逻辑
})
```
在上述示例中，'data'是要监听的数据的表达式，function(newValue, oldValue)是回调函数，newValue是数据变动后的新值，oldValue是数据变动前的旧值。
深度监听：
默认情况下，$watch只会监听对象或数组的引用变动，而不会监听对象或数组内部数据的变动。如果需要深度监听对象或数组内部数据的变动，可以将deep选项设置为true。
```
this.$watch('data', function(newValue, oldValue) {
  // 数据发生变动时的处理逻辑
}, {
  deep: true
})
```
在上述示例中，{ deep: true }表示开启了深度监听。
计算属性：
在Vue中，还可以使用计算属性来监听数据的变动。计算属性是基于响应式依赖进行缓存的，只有相关依赖发生变动时，才会重新计算。
```
computed: {
  data: function() {
    // 计算属性的逻辑
  }
}
```
在上述示例中，data是计算属性的名称，function()中是计算属性的逻辑，可以根据其他数据来计算data的值。
监听对象变动：
如果需要监听对象的属性变动，可以使用Vue.set方法来添加响应式属性。
```
Vue.set(object, key, value)
```
在上述示例中，object是对象，key是要设置的属性名，value是要设置的属性值。在调用Vue.set方法后，Vue会将属性设置为响应式，即在属性变动时会被监听到。
监听数组变动：
如果需要监听数组的变动，可以使用Vue.set方法来添加元素，以及使用数组的变异方法（如push、pop、splice等）。
```
// 添加元素
Vue.set(array, index, value)

// 数组的变异方法
array.push(element)
array.pop()
array.splice(index, count, element1, ..., elementN)
```
在上述示例中，array是数组，index是要设置的索引，value是要设置的元素值。调用Vue.set方法后，Vue会将元素设置为响应式。而数组的变异方法可以触发响应式更新。

通过使用以上方法，可以实现对数据变动的监听，并进行相应的处理。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，可以使用watch和computed来监听数据的变动。

使用watch监听数据变动

watch是Vue实例的一个选项，用于监听指定属性的变化。它接收一个以被监听的属性为键、以回调函数为值的对象。
```
// 在创建Vue实例时，定义一个data属性
data() {
  return {
    value: '',
  }
},
// 在Vue实例中，使用watch选项监听value属性的变动
watch: {
  value(newVal, oldVal) {
    console.log('value 变为：' + newVal + '，之前的值为：' + oldVal);
  },
},
```
当value属性变化时，watch中定义的回调函数将被调用。回调函数接收两个参数，分别是新值和旧值。
使用computed监听数据变动

computed是Vue实例的一个选项，用于定义一个「计算属性」。计算属性会根据它依赖的数据（即Vue实例的响应式属性）自动更新，并且计算结果将被缓存。
```
// 在创建Vue实例时，定义一个data属性
data() {
  return {
    firstName: 'John',
    lastName: 'Doe',
  }
},
// 在Vue实例中，使用computed选项定义fullName计算属性
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  },
},
```
当firstName或lastName属性变化时，computed中定义的函数将重新执行并返回新的计算结果。

使用watch和computed的区别：

watch适用于观察一个特定的属性，可以在属性变化时执行一些副作用的操作，比如发送API请求、操作DOM等。
computed适用于需要根据多个属性计算而来的值，只有当依赖的属性发生变动时，才会重新计算。而且，计算属性的结果会被缓存，只有在依赖的属性变化时才会重新计算，提高了性能。

总结：Vue提供了watch和computed两种方式来监听数据变动。watch适用于观察特定属性的变化，并执行一些副作用的操作；computed适用于根据多个属性计算而来的值，并自动更新和缓存计算结果。

1年前 0条评论