vue 的 watch 机制源码解析

2024-02-25 16:44:34

vue 是一个非常受欢迎的前端框架，它具有许多强大的功能，其中之一就是 watch 功能。watch 功能允许您在数据发生变化时执行某些操作，这使得开发变得更加容易和高效。

vue watch 的原理

vue watch 的原理很简单，它通过一个观察者对象来监听数据的变化。当数据发生变化时，观察者对象会自动执行预定义的操作。

const app = new Vue({
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count has changed from ${oldVal} to ${newVal}`)
    }
  }
})

在上面的代码中，我们定义了一个 Vue 实例，并在其内部定义了一个名为 count 的数据。我们还定义了一个 watch 对象，其中包含了一个名为 count 的属性。这个属性的值是一个函数，它会在 count 数据发生变化时执行。

当 count 数据发生变化时，watch 对象会自动执行 count 函数。该函数将接收两个参数：newVal 和 oldVal。newVal 是 count 数据的新值，oldVal 是 count 数据的旧值。

vue watch 的深度和浅度监听

vue watch 提供了两种不同的监听模式：深度监听和浅度监听。

深度监听会监听对象的所有属性的变化，包括嵌套对象的属性的变化。浅度监听只监听对象自身属性的变化，不会监听嵌套对象的属性的变化。

const app = new Vue({
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 30
      }
    }
  },
  watch: {
    'user.name'(newVal, oldVal) {
      console.log(`user.name has changed from ${oldVal} to ${newVal}`)
    },
    user: {
      handler(newVal, oldVal) {
        console.log(`user has changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`)
      },
      deep: true
    }
  }
})

在上面的代码中，我们定义了一个 Vue 实例，并在其内部定义了一个名为 user 的数据。user 数据是一个对象，其中包含两个属性：name 和 age。我们还定义了一个 watch 对象，其中包含两个属性：'user.name' 和 user。

'user.name' 属性的值是一个函数，它会在 user.name 数据发生变化时执行。user 属性的值也是一个函数，它会在 user 数据发生变化时执行。

当 user.name 数据发生变化时，watch 对象会自动执行 'user.name' 函数。该函数将接收两个参数：newVal 和 oldVal。newVal 是 user.name 数据的新值，oldVal 是 user.name 数据的旧值。

当 user 数据发生变化时，watch 对象会自动执行 user 函数。该函数将接收两个参数：newVal 和 oldVal。newVal 是 user 数据的新值，oldVal 是 user 数据的旧值。

vue watch 的源码解析

vue watch 的源码位于 vue.js 源码的 src/core/instance/state.js 文件中。

在该文件中，您可以找到一个名为 $watch 的方法。该方法用于创建一个观察者对象。观察者对象是一个函数，它会在数据发生变化时执行。

export function $watch (
  this: Component,
  expOrFn: string | Function,
  cb: Function,
  options?: WatchOptions | string
): Function {
  const vm: Component = this
  if (isPlainObject(cb)) {
    return createWatcher(vm, expOrFn, cb, options)
  }
  options = options || {}
  options.user = true
  const watcher = new Watcher(vm, expOrFn, cb, options)
  if (options.immediate) {
    cb.call(vm, watcher.value)
  }
  return function unwatchFn () {
    watcher.teardown()
  }
}