在 Vue.js 中，使用 watch 监听data变量如：对象属性/data变量-Toy模板网

这篇具有很好参考价值的文章主要介绍了在 Vue.js 中，使用 watch 监听data变量如：对象属性/data变量。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

watch 监听对象属性

在 Vue.js 中，使用 `watch` 监听对象属性的变化时，应该将属性名作为字符串传递给 `watch` 选项。

示例如下：

```javascript

watch: {
  'addform.isCheck1': function(newValue) {
    console.log(newValue);
    var quantity = this.addform.quantity;
    if (quantity % 2 === 0) {
      quantity = quantity / 2;
    } else {
      quantity = (quantity - 1) / 2;
    }
    this.updateAddChuZhenForm("上午", quantity, newValue);
  },
  'addform.isCheck2': function(newValue) {
    var quantity = this.addform.quantity;
    if (quantity % 2 === 0) {
      quantity = quantity / 2;
    } else {
      quantity++;
      quantity = quantity / 2;
    }
    this.updateAddChuZhenForm("下午", quantity, newValue);
  }
},

updateAddChuZhenForm函数

//检查数组中是否已存在具有相同 sign 标识的对象。如果存在，它会更新对象的选中状态；如果不存在，它会添加一个新对象。如果取消选中，它会在数组中查找并删除相应的对象。
    updateAddChuZhenForm(sign, quantity, isChecked) {
      console.log(quantity);
      const existingIndex = this.addChuZhenForm.findIndex(
        (obj) => obj.sign === sign
      );

      if (isChecked) {
        if (existingIndex === -1) {
          this.addChuZhenForm.push({
            department_id: this.addform.department_id,
            room_id: this.addform.room_id,
            doctor_id: this.addform.doctor_id,
            inquiry_time: this.addform.inquiry_time,
            quantity: quantity,
            sign: sign,
          });
        }
      } else {
        if (existingIndex !== -1) {
          this.addChuZhenForm.splice(existingIndex, 1);
        }
      }
    },

现在，当 `isCheck1` 或 `isCheck2` 的值发生变化时，相应的 `watch` 函数将被触发。
```

watch监听data变量

如果你想要监听一个普通变量，而不是 Vue 实例的属性，你可以使用 `watch` 选项以及直接在 `data` 中声明这个变量。

比如：如果你想监听一个名为 `variableToWatch` 的变量，可以这样做：

```javascript
data() {
  return {
    // 其他的data属性
    variableToWatch: false,
  };
},
watch: {
  variableToWatch(newValue) {
    // 在这里可以处理变量变化的逻辑
    console.log('变量的值变为：', newValue);
  }
},
在上述例子中，我们在 `data` 中声明了一个变量 `variableToWatch`，并在 `watch` 选项中监听了它的变化。当 `variableToWatch` 的值发生变化时，相应的 `watch` 函数将被触发。
```

如果你希望在组件加载后就立即监听该变量，你可以在 `created` 生命周期钩子中手动调用一次 `watch` 函数：

```javascript
created() {
  this.$watch('variableToWatch', (newValue) => {
    console.log('变量的值变为：', newValue);
  });
}
这样，在组件创建后，`variableToWatch` 的初始值也会被监视。
```文章来源地址https://www.toymoban.com/news/detail-707381.html

到了这里，关于在 Vue.js 中，使用 watch 监听data变量如：对象属性/data变量的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！