Vue 中的 $watch 详解-JavaScript中文网-JavaScript教程资源分享门户

在 Vue 中，$watch 是一个非常重要的方法，它可以用来监听一个数据的变化，并且触发特定的回调函数。$watch 方法的语法如下：

vm.$watch(
  exprOrFn: string | Function,
  callback: Function,
  options?: Object
): Function

其中，exprOrFn 可以是一个字符串，表示监听的数据路径；也可以是一个函数，用来监听一个表达式。callback 是一个回调函数，当监听的数据变化时，该函数会被触发。options 是一个可选的配置对象，用来设置一些 $watch 的选项。

$watch 的基本用法

假设我们有一个数据对象：

var data = {
  name: 'Tom',
  age: 18
}

我们可以使用 $watch 方法来监听这个数据的变化：

var vm = new Vue({
  el: '#app',
  data: data
});

vm.$watch('age', function (newVal, oldVal) {
  console.log('age change:', oldVal, '=>', newVal);
})

在上面的代码中，我们使用 $watch 方法来监听 data 对象中的 age 属性，当 age 属性变化时，会触发回调函数，并打印出变化前后的值。

$watch 的深度监听

$watch 方法还支持深度监听，可以监听对象或数组内部的变化。例如：

vm.$watch('obj', function (newVal, oldVal) {
  console.log('obj change:', oldVal, '=>', newVal);
}, { deep: true })

vm.$watch('arr', function (newVal, oldVal) {
  console.log('arr change:', oldVal, '=>', newVal);
}, { deep: true })

在上面的代码中，我们分别监听了一个对象和一个数组的变化，并开启了深度监听。

$watch 的使用场景

$watch 方法的使用场景非常多，下面列举一些常用的情况：

监听路由变化

在 Vue 中，我们可以使用 vue-router 来管理路由。当我们在路由之间切换时，有时需要在当前路由发生变化时做一些操作，比如更新页面标题。这时，就可以使用 $watch 来监听路由变化：

vm.$watch('$route', function (newVal, oldVal) {
  document.title = newVal.meta.title;
})

在上面的代码中，我们使用 $watch 来监听 $route 变量的变化，当路由发生变化时，会触发回调函数，并更新页面标题。

双向绑定需求

当我们在 Vue 中使用双向绑定时，有时需要在数据变化的同时，做一些额外的操作，比如更新其他相关的数据。这时，就可以使用 $watch 来监听数据变化：

// javascriptcn.com 代码示例
<template>
  <div>
    <input v-model="text">
    <div>{{ newText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'hello',
      newText: ''
    }
  },
  watch: {
    text(newVal, oldVal) {
      this.newText = '你输入了：' + newVal;
    }
  }
}
</script>

在上面的代码中，我们在 data 中定义了两个数据 text 和 newText，其中 text 是一个双向绑定的数据。在 watch 中，我们监听了 text 的变化，当 text 发生变化时，会触发回调函数，并更新 newText 的值。

监听表单变化

有时我们需要在表单填写完成后，对表单数据进行一些操作。这种情况下，就可以使用 $watch 来监听表单数据的变化：

// javascriptcn.com 代码示例
<template>
  <div>
    <input v-model="name">
    <input v-model="age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  watch: {
    name(newVal, oldVal) {
      console.log('name:', newVal);
    },
    age(newVal, oldVal) {
      console.log('age:', newVal);
    }
  }
}
</script>

在上面的代码中，我们监听了两个表单数据 name 和 age 的变化，并在回调函数中打印出了数据的值。

总结

$watch 方法是 Vue 中非常重要的一个方法，可以用来监听数据的变化，并在变化时触发特定的回调函数。它可以监听简单的数据，也可以监听对象和数组的变化。$watch 方法在开发过程中非常常用，可以用来解决各种问题。

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