vue2 中 watch 怎么使用

在 Vue2 中，可以使用 `watch` 监听某个数据的变化，一旦数据发生变化，就会执行相应的回调函数。`watch` 可以监听一个简单的数据，也可以监听一个复杂的数据对象或数组。

下面是一个简单的例子：

data() {
  return {
    message: 'Hello, world!'
  }
},
watch: {
  message(newVal, oldVal) {
    console.log(`数据变化了: ${oldVal} => ${newVal}`);
  }
}

在上面的代码中，我们使用 `watch` 监听了 `message` 这个数据的变化。每当 `message` 发生变化时，就会执行回调函数，输出变化前后的值。

除了可以监听简单的数据外，`watch` 还可以监听复杂的数据对象或数组。例如：

data() {
  return {
    list: [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' }
    ]
  }
},
watch: {
  'list[0].name'(newVal, oldVal) {
    console.log(`list[0].name 变化了: ${oldVal} => ${newVal}`);
  }
}

在上面的代码中，我们使用 `watch` 监听了 `list[0].name` 这个数据的变化。每当 `list[0].name` 发生变化时，就会执行回调函数，输出变化前后的值。

注意：在使用 `watch` 监听对象或数组时，需要在属性名前加上引号，以字符串的形式表示。同时，还可以使用 `deep` 选项来监听对象或数组中子属性的变化。例如：

data() {
  return {
    user: {
      name: '张三',
      age: 18
    }
  }
},
watch: {
  user: {
    handler(newVal, oldVal) {
      console.log(`user 对象变化了:`, oldVal, '=>', newVal);
    },
    deep: