Vue数据监听方法watch的使用

Vue中的数据监听方法 watch 可以用于监听数据的变化并做出响应。在该攻略中，我们将详细介绍 watch 的基本概念、用法以及示例代码。

基本概念

在Vue中，使用 watch 可以监听到一个数据的变化，并做出响应。watch 有两个参数：要监听的数据，以及监听数据变化后要执行的回调函数。当监听的数据发生变化时，Vue会自动调用回调函数。

基本用法

Vue中的 watch 可以在两个地方进行使用：在Vue实例的 watch 对象中，以及在单独的组件中。以下是使用 watch 的基本流程：

// 在Vue实例中使用watch
var vm = new Vue({
  data: {
    name: 'John'
  },
  watch: {
    // 要监听的数据
    name: function(newValue, oldValue) {
      console.log(`name由${oldValue}变为${newValue}`)
    }
  }
})

// 在组件中使用watch
Vue.component('my-component', {
  props: ['name'],
  watch: {
    // 要监听的数据
    name: function(newValue, oldValue) {
      console.log(`name由${oldValue}变为${newValue}`)
    }
  }
})

示例说明

示例1

在以下示例中，我们将使用 watch 监听一个数据的变化，并在控制台输出变化的信息。

var vm = new Vue({
  data: {
    counter: 0
  },
  watch: {
    // 监听counter的变化
    counter: function(newValue, oldValue) {
      console.log(`counter由${oldValue}变为${newValue}`)
    }
  }
})

// 在控制台输出counter由0变为1
vm.counter = 1

示例2

在以下示例中，我们将使用 watch 监听多个数据的变化，并在控制台输出变化的信息。

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  watch: {
    // 监听firstName和lastName的变化
    firstName: function(newValue, oldValue) {
      console.log(`firstName由${oldValue}变为${newValue}`)
    },
    lastName: function(newValue, oldValue) {
      console.log(`lastName由${oldValue}变为${newValue}`)
    }
  }
})

// 在控制台输出firstName由John变为Jane，以及lastName由Doe变为Smith
vm.firstName = 'Jane'
vm.lastName = 'Smith'

以上是关于 Vue数据监听方法watch的使用 的完整攻略，希望对您有所帮助！