watch 如何实现深度监听

Vue 的 watch 默认是浅监听，只有对象或数组第一层属性改变才会触发回调函数。如果需要深度监听，可以通过设置 `deep` 属性为 `true` 来实现。

例如，我们有一个对象 `obj`，它的属性 `prop` 是一个数组，我们需要深度监听 `prop` 数组的变化，可以这样写：

watch: {
  'obj.prop': {
    handler: function(val, oldVal) {
      // 对 prop 数组的变化做出响应
    },
    deep: true
  }
}

在这个例子中，我们设置了 `deep` 属性为 `true`，表示深度监听 `obj` 对象中的 `prop` 属性。当 `prop` 数组发生变化时，就会触发回调函数，并将新值 `val` 和旧值 `oldVal` 作为参数传入。

需要注意的是，深度监听会带来一定的性能开销，如果监听的对象或数组过于复杂，可能会导致页面性能下降。因此，在使用深度监听时应该谨慎使用，并考虑优化方案。

相关问题

watch怎么实现深度监听

在 Vue 中，watch 默认只会监听对象的一层属性变化，如果要实现深度监听，可以使用 `deep` 选项。设置 `deep: true` 后，watch 会递归监听对象内部所有属性的变化。

举个例子，假设我们有一个对象 `person`：

const person = {
  name: 'Tom',
  age: 20,
  address: {
    city: 'Beijing',
    street: '123 Main St'
  }
}

如果我们只使用普通的 watch：

watch: {
  person: {
    handler(newVal, oldVal) {
      console.log('person changed', newVal, oldVal)
    },
    deep: false
  }
}

那么只有当 `person` 对象本身被重新赋值时，watch 才会触发。如果我们需要深度监听 `person` 对象内部属性的变化，可以设置 `deep: true`：

watch: {
  person: {
    handler(newVal, oldVal) {
      console.log('person changed', newVal, oldVal)
    },
    deep: true
  }
}

这样，当 `person` 对象内部的属性（如 `name`、`age`、`address`、`city`、`street`）发生变化时，watch 都会触发。但是需要注意的是，这会带来一些性能问题，因为递归监听所有属性的变化可能会导致性能下降。因此，应该尽量避免使用过于深层次的监听。

watch怎么深度监听的

在JavaScript中，特别是Vue.js这样的MVVM框架中，如果你想深度监听某个对象的变化，通常会使用`deep watching`或`$watch`功能。例如，在Vue中，你可以这样做：

// Vue实例上设置深度监听
this.$watch('someObject', function(newVal, oldVal) {
  // 当'someObject'的属性发生改变时，这个回调会被触发
  console.log('someObject changed:', newVal, 'from', oldVal);
}, { deep: true }); // 指定为深度监听

// 或者直接在模板中使用v-bind:key和v-on:change
<template>
  <div v-for="(item, key) in someObject" :key="key">
    <input v-model="item" @change="onChange($event, key)">
  </div>
</template>

<script>
export default {
  methods: {
    onChange(event, key) {
      // event.target.value代表输入框的新值，key代表数组索引
      this.someObject[key] = event.target.value;
    }
  }
}
</script>

在这个例子中，当你修改数组中的对象或嵌套对象时，`onChange`方法会捕获到并响应变化。