Vue JS：计算值与观察者答案

【问题标题】：Vue JS: Computed value vs. watcherVue JS：计算值与观察者
【发布时间】：2021-03-20 07:55:32
【问题描述】：

一开始我有 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
  }
},

【问题讨论】：

你的冲动是对的，手表更好，因为你只想在事件触发时设置一个标志
真的取决于你想要做什么，如果你只是想检测布尔值是否从初始状态发生变化，那么计算会很简单，但你需要捕获初始状态，这样如果布尔值从 false 变为 true，则 changed 将为 true，然后如果该布尔值变回 false，则 changed 将返回 false。

标签： vue.js computed-properties

【解决方案1】：

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

您可以在布尔值上使用vm.$watch()，它会返回一个在初始更改后停止观看的函数，从而允许您创建一次性回调：

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

demo

【讨论】：

很好的答案，谢谢。因此，如果我想不断观察布尔值（不仅仅是设置一次标志，而是在每次更改时设置标志），我会在 $watch 函数中使用计算值？
想一想，带有 $watch() 的计算属性可能只是一个观察者:)
如果您想在每次更改布尔值时设置标志，您可以使用相同的解决方案但不使用unwatch()。