vue2 watch使用

Vue 2中的`watch`是一个响应式监听器，用于在属性值变化时执行特定的函数。`watch`可以让你在数据更新时自动执行一些副作用处理，例如数据验证、状态管理等。`watch`有几种使用方式：

1. **简单模式**：直接指定需要监视的属性和回调函数。

data() {
  return {
    count: 0
  }
}

watch: {
  count(newVal, oldVal) {
    console.log('count changed from', oldVal, 'to', newVal);
  }
}

当`count`的值改变时，这个函数会被调用。

2. **深度监听（deep: true）**：如果你想监听嵌套对象的变化，可以设置`deep`为`true`，这会递归地检查深层的对象属性。

watch: {
  obj: {
    deep: true,
    handler(newVal, oldVal) {
      // do something with the changes in obj
    }
  }
}

3. **立即执行（immediate: true）**：当数据刚刚创建并赋初始值时，就会立即触发一次回调。

watch: {
  initialValue: {
    immediate: true,
    handler(newVal) {
      console.log('Initial value was set:', newVal);
    }
  }
}

4. **getter和setter**：你可以提供getter和setter作为`handler`的参数，这样可以在访问或修改属性值时执行额外操作。

watch: {
  name: {
    get() {
      return this._name;
    },
    set(val) {
      this._name = val;
      console.log('Name is being updated to:', val);
    }
  }
}