vue 什么时候用深度监听 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue中深度监听（deep watching）是在某些特定场景下使用的技术，用于监视对象或数组中的每个属性的变化。

一般情况下，Vue使用的是浅层监听（shallow watching）。它会检测对象或数组本身的变化，但不会深入到内部属性或元素的变化。这是因为深度监听会产生性能上的开销，特别是当监听的对象或数组较大时。

但是，在某些场景下，使用深度监听是必要的。下面是几种适合使用深度监听的情况：

监听对象中嵌套的属性：当我们需要监听一个对象中某个属性的变化时，而这个属性本身是一个对象，我们就需要使用深度监听。通过在watch选项中使用deep属性，可以深度监听该属性的变化。
监听数组中元素的变化：当我们需要监听一个数组中某个特定索引位置的元素的变化时，也需要使用深度监听。同样地，在watch选项中使用deep属性，可以深度监听数组中特定索引位置的元素。
监听动态添加的属性或元素：在某些情况下，我们需要在对象或数组中动态地添加属性或元素，并且需要监听这些动态添加的属性或元素的变化。使用深度监听可以满足这个需求，因为它可以自动扩展并监听新添加的属性或元素。

需要注意的是，深度监听会带来一些性能上的开销，因此在使用时要权衡利弊。对于大型的对象或数组，深度监听可能导致性能下降。在这种情况下，可以考虑使用计算属性或watch选项中的immediate属性来适当地优化代码。

总结起来，深度监听在Vue中使用的场景包括监听嵌套对象的属性变化、监听数组中特定索引位置的元素变化，以及监听动态添加的属性或元素的变化。但在使用时需谨慎，权衡好性能和功能需求。

1年前 0条评论

不及物动词

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

在Vue中，深度监听（deep watching）主要是在以下情况下使用：

复杂数据结构的变化：当数据是一个复杂的嵌套结构，例如多层级的对象或数组时，我们可能希望监听其中一个节点的变化，以便及时地响应数据的改变。使用深度监听可以监听整个数据结构的变化，并在任何地方进行相应的更新。
非响应式数据的变化：Vue是通过响应式系统来追踪数据的变化并进行更新的。但是有时我们可能需要监听一些非响应式数据的变化，例如通过直接修改数组的长度、使用Object.defineProperty等方式改变数据。使用深度监听可以实现对这些非响应式数据的及时响应。
嵌套组件间的通信：当一个组件内部包含了嵌套的子组件，父组件需要监听子组件的数据变化时，可以使用深度监听。这使得父组件可以及时地响应子组件数据的变化，以便在需要时进行相应的操作。
动态添加属性：当对象的属性是通过动态添加的，而不是在创建对象时就存在的，我们可以使用深度监听来监听这些动态添加的属性的变化。这样就可以实时地获取新属性的值，并对其进行相应的处理。
对象或数组的部分属性的变化：有时我们只关注对象或数组的部分属性的变化，而不是整个对象或数组的变化。在这种情况下，我们可以使用深度监听来监听指定属性的变化，从而实现对这些属性变化的响应。

需要注意的是，深度监听是比较耗费性能的操作，因为它会递归地遍历整个数据结构。因此，在使用深度监听时，需要权衡性能和需求之间的平衡，并确保只在必要的情况下使用深度监听。如果数据结构较为简单，且只需要监听顶层数据的变化，那么直接使用浅监听（shallow watching）即可。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，我们可以使用深度监听来监听对象或数组的变化。当对象或数组中的属性发生改变时，Vue会触发相应的更新，并重新渲染相应的DOM。

那么，什么时候应该使用深度监听呢？以下情况下可以考虑使用深度监听：

监听对象或数组的变化：Vue默认只会监听对象或数组的第一层属性的变化，如果对象或数组内部的属性发生变化，Vue是无法自动检测到的。此时，可以使用深度监听来监听对象或数组的变化。例如：
```
// data中的obj是一个对象，我们需要监听其内部属性的变化
data() {
  return {
    obj: {
      a: {
        b: 1
      }
    }
  }
},
watch: {
  obj: {
    deep: true, // 使用深度监听
    handler(newVal, oldVal) {
      console.log('obj changed', newVal, oldVal)
    }
  }
}
```
当obj.a.b的值发生改变时，Vue会自动触发对应的watch方法。

监听数组内部元素的变化：当我们需要监听数组内部元素的变化时，例如新增、删除或修改数组中的元素，可以使用深度监听。Vue提供了$set方法来修改数组内部元素，这样Vue会自动触发对应的watch方法。例如：

// data中的arr是一个数组，我们需要监听其内部元素的变化
data() {
  return {
    arr: [1, 2, 3]
  }
},
methods: {
  addItem() {
    this.arr.push(4)
  },
  removeItem() {
    this.arr.splice(0, 1)
  },
  modifyItem() {
    this.$set(this.arr, 0, 100)
  }
},
watch: {
  arr: {
    deep: true, // 使用深度监听
    handler(newVal, oldVal) {
      console.log('arr changed', newVal, oldVal)
    }
  }
}

当调用addItem、removeItem、modifyItem方法时，Vue会自动触发对应的watch方法。

需要注意的是，深度监听会带来一些性能消耗，所以在使用时要慎重考虑。不是所有情况下都需要使用深度监听，只有在必要的情况下才应该使用。如果只需要监听对象或数组的第一层属性的变化，则不需要使用深度监听。

另外，如果你使用的是Vue 3.0以上的版本，Vue已经移除了deep配置项，官方推荐使用watch中的immediate和deep选项来实现深度监听。具体用法可以查阅Vue官方文档。

1年前 0条评论