vuejs boolean props watch 不会触发答案

【问题标题】：vuejs boolean props watch doesn't triggervuejs boolean props watch 不会触发
【发布时间】：2021-05-17 17:16:25
【问题描述】：

我正在开发一个 vue cli 项目，其中项目具有装备和未装备两种状态。

此状态由位于 Props 中的布尔值控制。既然可以切换状态我只好创建数据isEquipped默认设置为false。

然后我添加了一个观察者，但如果我的 props 设置为 True，它不会改变我的数据值。

这是代码

name: "Item",
        props: {
            Index : Number,
            name: String,
            desc : String,
            bonus: Array,
            equipped  : Boolean
        },
        data() {
            return {
                isEquipped : false
            }
        },
        watch: {
            equipped: function(stateEquipped) {
                this.isEquipped = stateEquipped;
            },
        },

例如，假设我创建了一个新项目，并将装备设置为 True，观察者没有触发并且 isEquipped 停留在 False，有什么理由吗？

我遇到了多个类似的问题，例如Vue @Watch not triggering on a boolean change，但没有一个对我有帮助

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

如果你想使用 watch 那么你可以尝试将其定义为：

equipped: {
    handler () {
        this.isEquipped = !this.isEquipped;
    },
    immediate: true
}

每当装备的值发生变化时，这将改变this.isEquipped的值。

【讨论】：

【解决方案2】：

为什么不直接使用computed value？

{
  // ...
  computed: {
    isEquipped () {
      // loaded from the component's props
      return this.equipped
    }
  }
}

然后您可以在组件中使用isEquipped，就像在您的data() 方法中定义它一样。您也可以直接在组件中使用equipped，因为您不会以任何方式对其进行转换。

<p>Am I equipped? - <b>{{ equipped }}</b></p>

【讨论】：

【解决方案3】：

我不确定isEquipped 的用例是什么，但是看到您的代码，您可以直接使用道具，除非您想改变与道具无关的isEquipped。

【讨论】：

【解决方案4】：

观察者“慢”，它们在 vue 的下一个生命周期滴答声上运行，这可能导致难以调试的反应性问题。

在某些情况下您需要它们，但如果您找到任何其他使用 vue 反应性系统的解决方案，您应该考虑使用该解决方案。

使用来自@chvolkmann 的计算值的解决方案可能也适用于您。

有一个更好的方法来做到这一点：

export default {
  name: "Item",
  props: {
    Index : Number,
    name: String,
    desc : String,
    bonus: Array,
    equipped  : Boolean
  },
  data() {
    return {
      isEquipped : false
    }
  },
  updated () {
    if (this.equipped !== this.isEquipped) {
      this.isEquipped = this.equipped
      // trigger "onEquip" event or whatever
    }
  }
}

updated 生命周期挂钩（顾名思义）在组件更新时被调用。
您将（未更改的）isEquipped 与新的 equipped 属性值进行比较，如果它们不同，您就知道发生了变化。

【讨论】：