Vue JS：计算值与观察者

Question

我一开始有 3 个布尔值，如果这 3 个值中的一个被用户更改（例如 HTML 复选框），我想设置 changed = true.

data()
  return {
    boolean1:false, //may initally be true/false
    boolean2:true,  //may initally be true/false
    boolean3:false, //may initally be true/false
    changed: false  //no changes to start with
  };
},

如何在 Vue 中正确跟踪这 3 个值？我的冲动是使用观察者，但我现在多次读到计算属性是此类任务的更好选择。不幸的是，他们没有为这样一个简单的跟踪任务提供示例，那么计算出的属性会是什么样子呢？到目前为止我有这个：

computed: {
  comp_settings_change: function(){
    // if booleans change, set to true, else stay at false.
    return true
  }
},

Answer 1

在这种情况下，观察者比计算道具更合适，因为标志只需要设置一次一次。

您可以在布尔值上使用 vm.$watch()，它 returns 是一个在初始更改后停止监视的函数，允许您创建一次性回调：

export default {
  mounted() {
    const unwatch = this.$watch(
      () => [this.boolean1, this.boolean2, this.boolean3],
      value => {
        unwatch()
        this.changed = true
      }
    )
  },
}

demo

Vue JS：计算值与观察者

Vue JS: Computed value vs. watcher

vue.js

computed-properties