vue监听使用什么

Vue监听使用的是Vue提供的watch属性来监听数据的变化。

在Vue中，可以通过在组件的watch属性中定义不同的属性来监听相应的数据变化。当被监听的数据变化时，Vue会自动调用定义的watch中的回调函数。

watch可以监听简单的数据类型，如：字符串、数字、布尔值等，也可以监听复杂的数据类型，如：对象、数组等。

以下是监听简单数据类型的示例：

data() {
  return {
    message: 'Hello, Vue!',
  };
},
watch: {
  message(newVal, oldVal) {
    console.log('message changed from', oldVal, 'to', newVal);
  },
},

以上代码中，通过定义一个data属性message，并在watch属性中对message进行监听。当message的值发生变化时，会自动调用watch中定义的回调函数。

除了监听简单数据类型的变化，Vue也可以监听对象和数组的变化。在监听对象和数组时，可以通过deep属性来指定是否深度监听。

以下是监听对象和数组的示例：

data() {
  return {
    userInfo: {
      name: 'John',
      age: 20,
    },
    shoppingList: ['apple', 'banana', 'orange'],
  };
},
watch: {
  userInfo: {
    handler(newVal, oldVal) {
      console.log('userInfo changed from', oldVal, 'to', newVal);
    },
    deep: true,
  },
  shoppingList: {
    handler(newVal, oldVal) {
      console.log('shoppingList changed from', oldVal, 'to', newVal);
    },
    deep: true,
  },
},

以上代码中，通过定义一个data属性userInfo和shoppingList，并在watch属性中对userInfo和shoppingList进行监听。当userInfo和shoppingList的值发生变化时，会自动调用watch中定义的回调函数。

需要注意的是，监听对象和数组时需要指定deep属性为true，否则只能监听到对象和数组的引用变化，而不能监听到内部属性的变化。

总结来说，Vue监听使用的是watch属性来监听数据的变化，可以监听简单的数据类型，也可以监听复杂的数据类型，如：对象、数组等。在监听对象和数组时，需要通过deep属性来指定是否深度监听。

在Vue中，可以使用Vue提供的监听机制来监听数据的变化。Vue提供了两种方法来实现监听：观察者模式和计算属性。

1. 观察者模式：Vue中的观察者模式是通过$watch方法来实现的。该方法接收两个参数，第一个参数是要监听的数据的名称或表达式，第二个参数是一个回调函数，当监听的数据发生变化时，该回调函数会被触发。可以在Vue实例的created或mounted生命周期钩子中调用$watch方法来开始监听数据变化。

例如：

created() {
  this.$watch('message', function(newValue, oldValue) {
    console.log('message变化了', newValue, oldValue);
  });
}

2. 计算属性：计算属性是指基于其他数据进行计算而得到的属性，可以在Vue实例中定义计算属性，并在模板中使用。计算属性会自动监听依赖的数据，在依赖数据发生变化时重新计算。

例如：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

在上面的例子中，reversedMessage是一个计算属性，依赖于message，当message发生变化时，reversedMessage会重新计算。

除了以上两种方法，Vue还提供了许多其他的监听方式，比如$watch的深度监听、监听数组变化等。根据具体的需求，可以选择合适的监听方式来实现数据的监听。

在Vue中，可以使用watch来监听数据的变化。watch的基本语法是：

watch: {
  // 监听的数据
  watchedData: function(newVal, oldVal) {
    // 在数据变化时执行的操作
  }
}

其中，watchedData表示要监听的数据，newVal表示数据变化后的值，oldVal表示变化前的值。

在watch中除了可以监听简单的数据变化，还可以监听对象或数组的变化。通过配置deep属性来实现深度监听。示例代码如下：

watch: {
  watchedObj: {
    handler: function(newVal, oldVal) {
      // 在对象变化时执行的操作
    },
    deep: true // 深度监听
  },
  watchedArr: {
    handler: function(newVal, oldVal) {
      // 在数组变化时执行的操作
    },
    deep: true // 深度监听
  }
}

在Vue 3中，watch的使用也发生了一些变化。可以使用watch函数来监听数据的变化，示例代码如下：

watch(watchedData, (newVal, oldVal) => {
  // 在数据变化时执行的操作
}, { deep: true })

其中，watchedData表示要监听的数据，箭头函数则是变化后的回调函数，deep属性用于实现深度监听。

除了watch，Vue还提供了$watch方法，可以在Vue实例上直接调用。可以使用$watch来监听数据的变化，示例代码如下：

this.$watch('watchedData', (newVal, oldVal) => {
  // 在数据变化时执行的操作
}, { deep: true })

在上述示例代码中，watchedData表示要监听的数据，箭头函数则是变化后的回调函数，deep属性用于实现深度监听。

需要注意的是，watch监听的数据必须是Vue实例中的响应式数据，只有响应式数据的变化才能被监听到。