vue2 watch 代码

Vue 2中的`watch`是一个响应式监听机制，用于在数据发生变化时执行特定的函数。它的基本语法如下：

// 在组件的data里定义需要观察的变量
data() {
  return {
    count: 0
  }
}

// 使用watch选项来监听count的变化
methods: {
  increment() {
    this.count++
  },
  watcherExample: {
    // 第一个参数是目标属性名，可以是字符串或路径
    // 第二个参数是getter，通常不需要写，因为Vue会自动获取当前值
    // 第三个参数是setter，当目标属性的值改变时会被调用
    handler(newCount) {
      console.log('Count changed to:', newCount)
    },
    deep: true, // 如果你想深度监听嵌套的对象或数组
    immediate: true, // 是否立即执行一次，在首次设置时
    // 当然，你也可以直接提供一个函数作为handler
    handle(newCount) { ... }
  }
}

当你调用`increment()`时，`watch`内的`handler`就会被触发。如果设置了`deep`为`true`，它还会监听目标属性的嵌套变化。

相关问题

vue watch 底层代码

Vue.js 的 `watch` 选项底层代码主要是通过 `Object.defineProperty()` 方法实现的。

当你在 Vue.js 组件中使用 `watch` 选项时，Vue.js 会在组件实例化时对每一个 `watch` 属性进行依赖收集，然后在数据变化时触发相应的回调函数。具体实现过程如下：

1. 在组件实例化时，Vue.js 会对 `watch` 选项进行遍历，对每一个属性调用 `createWatcher()` 方法进行依赖收集。

2. `createWatcher()` 方法会创建一个 `Watcher` 对象，并将该对象添加到当前组件实例的 `_watchers` 数组中，同时调用 `get()` 方法进行依赖收集。

3. `get()` 方法会先调用 `pushTarget()` 方法将当前 `Watcher` 对象入栈，然后通过 `this.vm[this.expression]` 获取要监听的数据，从而触发该数据的 `get()` 方法进行依赖收集。

4. 在数据的 `get()` 方法中，会判断是否存在依赖，如果有则将该 `Watcher` 对象添加到依赖数组中。

5. 当数据变化时，会触发数据的 `set()` 方法，该方法会遍历依赖数组中的所有 `Watcher` 对象，依次调用其 `update()` 方法进行更新。

6. `update()` 方法会先判断该 `Watcher` 对象是否处于激活状态，如果是则调用回调函数进行更新。

通过以上步骤，Vue.js 实现了对 `watch` 选项的底层实现。

vue2 watch

好的，关于 Vue2 中的 watch，它是用来监听数据变化并执行相应操作的。当被监听的数据发生变化时，watch 会自动执行指定的回调函数。下面是一个简单的示例：

watch: {
  // 监听 firstName 和 lastName 两个数据的变化
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
}

在上面的代码中，我们监听了 `firstName` 和 `lastName` 两个数据的变化，并在回调函数中更新了 `fullName` 数据。