在 Vue 中使用 watch 可以帮助我们监听一个组件的数据变化。我们可以这样监听两个数据的变化:

watch: {
  data1: function(newVal, oldVal) {
    // 监听到 data1 变化时执行的函数
  },
  data2: function(newVal, oldVal) {
    // 监听到 data2 变化时执行的函数
  }
}

我们可以通过在 watch 对象中定义两个函数来同时监听 data1 和 data2。每个函数接收两个参数:新的值和旧的值。当 data1 或 data2 发生变化时,对应的函数就会被调用。

例如:

watch: {data1: function(newVal, oldVal) {
    console.log('data1 发生了变化,新值是 ' + newVal + ',旧值是 ' + oldVal)
  },
  data2: function(newVal, oldVal) {
    console.log('data2 发生了变化,新值是 ' + newVal + ',旧值是 ' + oldVal)
  }
}

在这个例子中,当 data1 和 data2 发生变化时,会在控制台中输出一条消息。

注意:watch 不能监听到数据的初始化,只能监听到数据发生变化后的操作。

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐