Vue 中使用 watch 选项监听数据变化的注意事项

在 Vue 中，我们可以使用 watch 选项来监听数据的变化，并在数据变化时执行一些操作。这个功能非常实用，但是在使用的过程中也需要注意一些问题。

watch 的基本用法

首先，我们来看一下 watch 的基本用法。在 Vue 组件中，我们可以通过以下方式来定义一个 watch：

// javascriptcn.com 代码示例
export default {
  data() {
    return {
      message: '',
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`)
    },
  },
}

在上面的代码中，我们定义了一个 message 数据，并定义了一个 watch 来监听 message 的变化。当 message 的值发生变化时，watch 中定义的回调函数就会被执行。

watch 的深度监听

在 Vue 中，我们可以使用 deep 选项来深度监听数据的变化。这个选项可以用来监听一个对象或数组内部值的变化。例如：

// javascriptcn.com 代码示例
export default {
  data() {
    return {
      user: {
        name: '',
        age: 0,
      },
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('user changed')
      },
      deep: true,
    },
  },
}

在上面的代码中，我们定义了一个 user 对象，并使用 deep 选项来深度监听 user 对象内部值的变化。当 user 对象内部的值发生变化时，watch 中定义的回调函数就会被执行。

需要注意的是，使用 deep 选项会带来一定的性能开销，因此只有在必要的时候才应该使用。

watch 的立即执行

在 Vue 中，我们可以使用 immediate 选项来让 watch 在组件挂载时立即执行一次。例如：

// javascriptcn.com 代码示例
export default {
  data() {
    return {
      message: '',
    }
  },
  watch: {
    message: {
      handler(newVal, oldVal) {
        console.log(`message changed from ${oldVal} to ${newVal}`)
      },
      immediate: true,
    },
  },
}

在上面的代码中，我们使用 immediate 选项来让 watch 在组件挂载时立即执行一次。这个选项非常有用，可以让我们在组件挂载时就能够获取到最新的数据。

watch 的取消监听

在 Vue 中，我们可以使用 unwatch 方法来取消对数据的监听。例如：

// javascriptcn.com 代码示例
export default {
  data() {
    return {
      message: '',
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`)
    },
  },
  methods: {
    cancelWatch() {
      this.$watch('message', null)
    },
  },
}

在上面的代码中，我们定义了一个 cancelWatch 方法，用来取消对 message 数据的监听。当我们调用这个方法时，message 数据的监听就会被取消。

总结

在 Vue 中，使用 watch 选项来监听数据的变化是非常有用的。但是在使用的过程中，我们也需要注意一些问题，比如深度监听会带来性能开销，立即执行会影响组件挂载速度等。希望本文能够对你在 Vue 中使用 watch 选项有所帮助。

完整示例代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <input v-model="message" />
    <button @click="cancelWatch">取消监听</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  watch: {
    message: {
      handler(newVal, oldVal) {
        console.log(`message changed from ${oldVal} to ${newVal}`)
      },
      immediate: true,
    },
  },
  methods: {
    cancelWatch() {
      this.$watch('message', null)
    },
  },
}
</script>

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655743c3d2f5e1655d1b22e8