vue2 中watch

在 Vue2 中，watch 是一个选项，用于监听数据的变化并执行相应的回调函数。它可以监听单个属性或者深度监听整个对象，还可以设置 immediate 选项在组件创建时立即执行回调函数。

例如，我们可以在组件中使用 watch 监听一个数据的变化：

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`message changed from ${oldValue} to ${newValue}`)
    }
  }
}

当 message 的值发生变化时，watch 中的回调函数就会被执行。

相关问题

vue2中watch

在Vue2中，watch选项用于监听数据的变化，并在数据变化时执行相应的回调函数。通过监听数据的变化，我们可以在数据发生改变时进行一些操作，例如更新视图或触发其他逻辑。

在情况1中，当点击按钮时，会将a的值从2改变为3，watch选项会监听a的变化，并在变化时执行回调函数，输出新值3和旧值2。

在情况2中，a是一个对象，当点击按钮时，会将a.s的值从3改变为4，watch选项会监听a的变化，并在变化时执行回调函数，输出新值{ s: 4, d: 7 }。

总结来说，watch选项可用于监听简单数据类型或对象的变化，并执行相应的回调函数。

vue2中watch监听ref

在Vue2中，可以使用`watch`选项来监听`ref`的变化。下面是一个示例代码：

var app = new Vue({
  el: '#app2',
  data: {
    child: {
      age: 2
    },
    hasErr: false
  },
  watch: {
    'child.age': function(newVal, oldVal) {
      if (newVal < 3 || newVal > 6) {
        this.hasErr = true;
      } else {
        this.hasErr = false;
      }
    }
  }
});

在上面的代码中，我们定义了一个`watch`选项，它监听了`child.age`这个`ref`的变化。当`child.age`的值发生变化时，`watch`函数会被触发。在这个示例中，我们检查了`child.age`的值是否在3到6之间，如果不在这个范围内，就将`hasErr`设置为`true`，否则设置为`false`。