浅析vue 函数配置项watch及函数 $watch 源码分享

浅析 Vue 函数配置项 watch 及函数 $watch

在 Vue.js 中，watch 是一个非常重要的选项。它可以监听数据的变化，从而触发相应的逻辑。本文将从两个方面来介绍 watch：函数配置项 watch 和函数 $watch 的源码分享。

函数配置项 watch

watch 是一个对象，它的属性是要监听的数据的名称，值是一个对象或函数。如果值是一个函数，那么它将会在数据变化时被调用。如果值是一个对象，那么可以定义以下几个选项：

• handler：数据变化时的回调函数。
• deep：布尔值，表示是否深度监听。
• immediate：布尔值，表示是否在绑定时立即执行回调函数。
• lazy：布尔值，表示是否延迟执行回调函数（即在下一次更新时才执行）。

以下是一个示例，展示了如何在 watch 中使用函数：

new Vue({
  el: '#app',
  data: {
    message: '',
  },
  watch: {
    message: function (newValue, oldValue) {
      console.log('数据变化啦！')
    },
  },
})

在上面的代码中，我们监听了 message 数据的变化，每当 message 发生变化时，就会调用回调函数并打印一段信息。

接下来让我们看看如何使用对象来定义 watch：

new Vue({
  el: '#app',
  data: {
    message: {
      text: '',
    },
  },
  watch: {
    message: {
      handler: function (newValue, oldValue) {
        console.log('数据变化啦！')
      },
      deep: true,
    },
  },
})

在上面的代码中，我们监听了 message 数据的变化，并设置了 deep 选项为 true，表示要深度监听 message 中的所有属性。

除了上述选项之外，还可以在对象中定义其他选项，例如：before、after、filter等。如果想要了解更多详情，请参考官方文档。

函数 $watch 源码分享

除了使用函数配置项 watch 外，我们还可以使用 $watch 函数来监听数据的变化。这个函数接收三个参数：要监听的数据的名称，回调函数，以及选项对象。

以下是一个示例，展示了如何使用 $watch 函数：

new Vue({
  el: '#app',
  data: {
    message: '',
  },
  created: function () {
    this.$watch('message', function (newValue, oldValue) {
      console.log('数据变化啦！')
    })
  },
})

在上面的代码中，我们在 created 钩子函数中使用 $watch 函数来监听 message 数据的变化。每当 message 数据变化时，回调函数就会被调用。

最后，让我们快速浏览一下 $watch 函数的源码。$watch 函数的定义在 core/instance/state.js 文件中，具体内容如下：

Vue.prototype.$watch = function (expOrFn, cb, options) {
  var vm = this
  options = options || {}
  var watcher = new Watcher(vm, expOrFn, cb, options)
  if (options.immediate) {
    cb.call(vm, watcher.value)
  }
  return function unwatchFn () {
    watcher.teardown()
  }
}

在 $watch 函数的内部，我们创建了一个新的 watcher 实例，并在必要时执行回调函数。如果 immediate 选项为 true，则会在监听数据时立即执行回调函数。最后，我们返回一个函数用于取消监听数据。

示例说明

示例一

比如说你有一个输入框和一个按钮，当用户在输入框输入文本并点击按钮时，将文本展示到页面上。这时候就可以用 watch 来监听 message 数据的变化，如下所示：

<div id="app">
  <input type="text" v-model="message" />
  <button @click="showMessage">显示消息</button>
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: '',
  },
  watch: {
    message: function (newValue, oldValue) {
      console.log('数据变化啦！')
    }
  },
  methods: {
    showMessage: function () {
      alert(this.message)
    }
  },
})

在上面的代码中，我们监听了 message 数据的变化，并在用户输入文本时触发回调函数并打印一条信息。另外，我们还定义了一个 showMessage 方法，当用户点击按钮时，会弹出用户输入的文本。

示例二

比如说你有一个复杂的数据结构，你希望深度监听其属性的变化。这时候就可以使用对象方式来定义 watch，如下所示：

<div id="app">
  <p>{{ message.text }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: {
      text: '',
    },
  },
  watch: {
    message: {
      handler: function (newValue, oldValue) {
        console.log('数据变化啦！')
      },
      deep: true,
    },
  },
})

在上面的代码中，我们监听了 message 数据的变化，并设置了 deep 选项为 true，表示要深度监听 message 中的所有属性。每当 message 中的任何属性发生变化时，回调函数就会被执行。