vuejs boolean props watch 不会触发

Posted 2023-02-22

【中文标题】vuejs boolean props watch 不会触发

【英文标题】：vuejs boolean props watch doesn't trigger

【发布时间】：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，但没有一个对我有帮助

【参考方案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 属性值进行比较，如果它们不同，您就知道发生了变化。