vue里watch监听与深度监听的区别

Vue中watch可以监听指定的数据变化，当数据发生变化时，会自动执行回调函数。深度监听是指在监听对象或数组类型的数据变化时，会递归监听其内部所有属性或元素的变化。具体区别如下：

1. 监听普通数据类型：watch默认只监听一层数据变化，而深度监听则可以监听到嵌套在该数据内部的所有数据变化。

2. 监听对象类型数据：watch监听对象类型数据时，只会监听该对象的引用是否发生变化，而不会监听该对象内部属性的变化。深度监听则可以递归监听该对象内部所有属性的变化。

3. 监听数组类型数据：watch监听数组类型数据时，只会监听数组的引用是否发生变化，而不会监听数组元素的变化。深度监听则可以递归监听数组内部所有元素的变化。

总之，深度监听可以监听到更细粒度的数据变化，但也会带来一定的性能消耗。在使用时需要根据实际情况进行选择。

相关问题

vue watch深度监听

在Vue.js中，使用watch选项可以监听数据的变化，当数据变化时，可以执行相应的操作。而使用deep属性可以开启深度监听，实现对对象或数组内部属性的变化进行监听。

举个例子，当我们需要监听一个对象内部属性的变化时，可以这样写：

watch: {
  obj: {
    handler: function(val, oldVal) {
      console.log('obj changed')
    },
    deep: true
  }
}

这里，我们监听了一个名为obj的对象，并开启了深度监听。当obj内部的属性发生变化时，会触发handler回调函数，输出'obj changed'。

需要注意的是，深度监听会带来性能上的开销，因此建议在必要的情况下使用。此外，Vue.js还提供了一些其他的监听方式，如computed计算属性和watcher观察者等，可以根据具体需求选择合适的监听方式。

Vue中watch监听

在Vue中，watch用于监听Vue实例的数据变化。它可以观察和侦听Vue实例响应式数据的变化。Watch提供两种监听方式：

1. watch的直接监听：直接监听一个简单变量的变化。可以在watch选项中定义一个与监听的变量同名的方法，当监听的变量改变时，该方法会被调用。

export default {
  data(){
    return {
      inputValue: '',
      watchInputValue: ''
    }
  },
  watch: {
    inputValue(newName, oldName){
      this.watchInputValue = newName
    }
  }
}

2. watch的handler函数监听：使用handler函数监听一个简单变量的变化。可以在watch选项中定义一个对象，对象的属性名为监听的变量，属性值为一个handler函数，当监听的变量改变时，该handler函数会被调用。

export default {
  data(){
    return {
      inputValue: '',
      watchInputValue: ''
    }
  },
  watch: {
    inputValue: {
      handler(newName, oldName){
        this.watchInputValue = newName
      }
    }
  }
}

当对象的属性过多时，可以使用deep属性直接对对象进行深度监听。但是如果只想监听对象中的其中一个属性，可以直接使用字符串形式的监听。

export default {
  watch: {
    '对象.属性'(newValue, oldValue){
      console.log(newValue, oldValue)
    }
  }
}