Vue.js: 有关 watch 的完整教程-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 是一款流行的前端框架，它提供了许多功能强大的特性，其中之一就是 watch。watch 可以用来监听数据的变化，并在数据发生变化时执行一些操作。本文将详细介绍 Vue.js 中 watch 的使用方法，包括基本语法、高级用法和示例代码。

基本语法

watch 的基本语法如下：

// www.javascriptcn.com code example
watch: {
  // 监听的数据
  propertyName: {
    // 回调函数
    handler: function(val, oldVal) {
      // 数据发生变化时执行的操作
    },
    // 是否立即执行回调函数
    immediate: true,
    // 是否深度监听对象的变化
    deep: true
  }
}

其中，propertyName 是要监听的数据的名称，handler 是数据发生变化时要执行的回调函数，val 是新的数据值，oldVal 是旧的数据值。immediate 表示是否在监听开始时立即执行一次回调函数，默认为 false。deep 表示是否深度监听对象的变化，默认为 false。

下面是一个简单的示例：

// www.javascriptcn.com code example
<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count: {
      handler(val, oldVal) {
        console.log(`count: ${oldVal} -> ${val}`)
      },
      immediate: true
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

在上面的示例中，我们定义了一个名为 count 的数据，并使用 watch 监听了它的变化。当用户点击按钮时，count 的值会增加一，然后 watch 会执行回调函数并输出旧值和新值。

高级用法

除了基本语法之外，watch 还有一些高级用法，可以更好地满足复杂的需求。

深度监听对象

如果要监听一个对象的变化，可以使用 deep 选项。当 deep 为 true 时，watch 会递归地监听对象内部的属性，如果任何一个属性发生变化，都会触发回调函数。

watch: {
  obj: {
    handler(val, oldVal) {
      console.log(`obj: ${oldVal} -> ${val}`)
    },
    deep: true
  }
}

监听多个数据

如果要监听多个数据的变化，可以使用数组语法。数组中的每个元素都是一个对象，表示要监听的数据和回调函数。

// www.javascriptcn.com code example
watch: {
  'data1': function() { ... },
  'data2': function() { ... },
  'data3': [
    {
      handler: function() { ... },
      immediate: true
    },
    {
      handler: function() { ... }
    }
  ]
}

取消监听

如果不再需要监听某个数据的变化，可以使用 $unwatch 方法取消监听。

const unwatch = vm.$watch('data', function() { ... })
unwatch()

示例代码

下面是一个更复杂的示例，演示了 watch 的多种用法。

// www.javascriptcn.com code example
<template>
  <div>
    <p>count: {{ count }}</p>
    <p>obj.a: {{ obj.a }}</p>
    <p>obj.b: {{ obj.b }}</p>
    <button @click="increment">Increment</button>
    <button @click="changeObj">Change Obj</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      obj: {
        a: 1,
        b: 2
      }
    }
  },
  watch: {
    count: [
      {
        handler(val, oldVal) {
          console.log(`count: ${oldVal} -> ${val}`)
        },
        {
          handler(val, oldVal) {
            console.log(`count: ${oldVal} -> ${val}`)
          }
        }
      ]
    },
    obj: {
      handler(val, oldVal) {
        console.log(`obj: ${JSON.stringify(oldVal)} -> ${JSON.stringify(val)}`)
      },
      deep: true
    }
  },
  methods: {
    increment() {
      this.count++
    },
    changeObj() {
      this.obj.a++
      this.obj.b++
    }
  }
}
</script>

在上面的示例中，我们定义了一个名为 count 的数据和一个名为 obj 的对象，并使用 watch 监听了它们的变化。当用户点击第一个按钮时，count 的值会增加一，然后 watch 会执行两个回调函数并输出旧值和新值。当用户点击第二个按钮时，obj 的属性值会增加一，然后 watch 会执行回调函数并输出旧值和新值。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d237b9a941bf713443b182

Vue.js: 有关 watch 的完整教程