vue监听是用什么

Vue监听是通过使用Vue提供的watch属性来实现的。

在Vue中，我们可以通过watch属性来监听特定数据的变化，并在变化时执行相应的操作。watch属性可以是一个对象，该对象的每个属性对应需要监听的数据的名称，属性的值是一个函数，用于在数据变化时执行相应的操作。

以一个简单的示例来说明如何使用watch属性进行监听：

<template>
  <div>
    <input v-model="message" type="text">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: ''
      }
    },
    watch: {
      message(newValue, oldValue) {
        console.log(`数据从${oldValue}变为${newValue}`);
      }
    }
  }
</script>

在上述示例中，我们通过v-model指令将输入框中的值与data中的message属性进行双向绑定。在watch属性中定义了一个名为message的监听器，当message属性的值发生变化时，watch属性中的函数会被触发，同时传入新值newValue和旧值oldValue，并输出变化的信息到控制台。

除了监听简单的数据变化外，我们还可以通过watch属性来监听计算属性、深度监听、立即触发监听等。详细的用法可以参考Vue官方文档。

总结：Vue监听是通过使用Vue提供的watch属性来实现的，利用watch属性可以在数据变化时执行相应的操作。

Vue可以通过使用watch属性来监听数据的变化。watch属性是一个对象，其属性是要监听的数据，值是一个回调函数，当数据发生变化时，回调函数将被调用。

具体使用方式如下：

1. 在Vue的实例中定义watch属性：

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message: function(newValue, oldValue) {
      // 当message发生变化时，回调函数将被调用
      console.log('message发生了变化，新值为：' + newValue + '，旧值为：' + oldValue);
    }
  }
})

在上述代码中，我们定义了一个message属性，并在watch属性中定义了一个回调函数来监听该属性的变化。

2. 在组件中使用watch属性：

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      // 当message发生变化时，回调函数将被调用
      console.log('message发生了变化，新值为：' + newValue + '，旧值为：' + oldValue);
    }
  }
}

在Vue组件中，同样可以定义watch属性来监听数据的变化。

3. 监听多个属性的变化：

watch属性除了可以监听单个属性的变化外，还可以监听多个属性的变化。具体方式如下：

new Vue({
  data: {
    message: 'Hello Vue!',
    count: 0
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log('message发生了变化，新值为：' + newValue + '，旧值为：' + oldValue);
    },
    count: function(newValue, oldValue) {
      console.log('count发生了变化，新值为：' + newValue + '，旧值为：' + oldValue);
    }
  }
})

在上述代码中，我们监听了message和count这两个属性的变化，并分别在回调函数中进行处理。

4. 监听深层数据的变化：

除了可以监听普通属性的变化外，Vue还可以监听对象和数组内部数据的变化。

new Vue({
  data: {
    info: {
      name: 'Tom',
      age: 18
    },
    list: [1, 2, 3]
  },
  watch: {
    'info.name': function(newValue, oldValue) {
      console.log('info.name发生了变化，新值为：' + newValue + '，旧值为：' + oldValue);
    },
    'list': function(newValue, oldValue) {
      console.log('list发生了变化，新值为：' + newValue + '，旧值为：' + oldValue);
    }
  }
})

在上述代码中，我们使用字符串的形式来监听深层数据的变化。只要深层数据发生变化，回调函数就会被调用。

5. 停止监听：

如果我们在某个时刻不再需要监听数据的变化，可以使用$watch方法来停止监听。

// 监听数据变化，并返回一个取消监听的函数
var unwatch = vm.$watch('message', function(newValue, oldValue) {
  console.log('message发生了变化，新值为：' + newValue + '，旧值为：' + oldValue);
});

// 停止监听数据变化
unwatch();

在上述代码中，我们使用$watch方法监听message属性的变化，并将返回的取消监听的函数赋值给unwatch变量。当我们不再需要监听时，可以调用unwatch函数来停止监听。

总结：

通过watch属性，我们可以方便地监听数据的变化，并在变化时进行相应的处理。无论是在Vue的实例中使用watch属性，还是在组件中使用watch属性，都能够有效地监听数据的变化。同时，我们还可以监听多个属性的变化，以及监听深层数据的变化。

Vue监听可以通过两种方式来实现：使用Vue的watch属性或者使用Vue的计算属性。

1. 使用Vue的watch属性：
   Vue中的watch属性允许我们监听一个Vue实例的数据变化，并在数据变化时执行相应的回调函数。我们可以通过定义一个watch选项来实现这个功能。具体操作步骤如下：

步骤一：在Vue实例的选项中添加一个watch属性，并定义要监听的数据和回调函数。

new Vue({
  watch: {
    // 监听firstName属性的变化
    firstName: function(newVal, oldVal) {
      console.log('firstName变化了', newVal, oldVal);
    },
    // 监听lastName属性的变化
    lastName: 'lastNameChanged'
  },
  methods: {
    lastNameChanged: function(newVal, oldVal) {
      console.log('lastName变化了', newVal, oldVal);
    }
  }
});

在上述代码中，我们定义了一个watch属性，其中有两个属性：firstName和lastName。firstName的监听函数是一个匿名函数，当firstName发生变化时，该函数将被调用；而lastName的监听函数是一个名为lastNameChanged的方法，当lastName发生变化时，该方法将被调用。

步骤二：在Vue实例中更新监听的数据，在Vue实例中更新数据时，watch选项中定义的回调函数将被自动调用。

// 更新firstName数据
this.firstName = 'John';
// 更新lastName数据
this.lastName = 'Doe';

2. 使用Vue的计算属性：
   Vue的计算属性允许我们在模板中声明式地依赖于其他属性，当依赖的属性发生变化时，计算属性将自动重新计算其值，并返回结果。我们可以在计算属性中添加监听器，以执行特定的操作。具体操作步骤如下：

步骤一：在Vue实例的选项中添加一个computed属性，并定义一个计算属性函数。

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    // 定义一个fullName计算属性
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    // 监听fullName计算属性的变化
    fullName: function(newVal, oldVal) {
      console.log('fullName变化了', newVal, oldVal);
    }
  }
});

在上述代码中，我们定义了一个计算属性fullName，它的值会根据firstName和lastName的变化而自动计算并更新。同时，我们也在watch选项中定义了一个监听fullName计算属性的回调函数。

步骤二：在模板中使用计算属性，在模板中使用计算属性时，它的值将自动根据相关的数据进行计算和更新。

<div>{{ fullName }}</div>

在上述代码中，我们在模板中使用了fullName计算属性的值。

以上就是使用Vue的watch属性和计算属性来实现监听的方法和操作流程。通过watch属性可以监听指定数据的变化，执行相应的回调函数；通过计算属性可以声明式地依赖其他属性，并根据变化自动更新值。这两种方法可以根据具体的需求选择使用。