VueJS 2.5.16中父组件filterAll被调用两次的问题咨询

别担心，这种情况在Vue 2里其实挺常见的，不是你的代码有问题，主要是Vue的响应式机制和开发环境的调试逻辑导致的，下面给你详细解释和解决办法：

为什么会被调用两次？ #

• 开发环境的校验机制：Vue在开发模式下，为了确保响应式系统的正确性，会在初始化和渲染阶段多次访问响应式属性，以此来检测是否有不符合规范的操作（比如在getter里修改数据），这属于正常的调试行为，生产环境下这个额外的访问会被优化掉，通常只会调用一次。
• Prop传递的触发：当你把filterAll作为prop传给子组件<datafieldcheckbox>时，父组件渲染时会读取一次这个属性，子组件接收并处理prop时可能又会触发一次读取，尤其是如果子组件的模板或内部逻辑中使用了这个prop，就会增加访问次数。

另外还要提一句：你在data里定义getter属性的写法其实不太符合Vue的设计规范，data应该用来存放纯响应式数据，带计算逻辑的场景更适合用计算属性（computed）。

解决办法 #

1. 改用Computed计算属性（推荐） #

计算属性自带缓存机制，只有当它的依赖项发生变化时，才会重新执行计算逻辑，即使被多次访问也会直接返回缓存结果，完美解决重复调用的问题：

// 主Vue应用的配置
computed: {
  filterAll() {
    console.log(11111111111);
    // 这里写你的实际计算逻辑，返回最终需要的值
    return /* 你的过滤结果 */;
  }
}

之后模板里的用法不变，依然是:filtervalue="filterAll"，这样即使Vue多次访问这个属性，也只会在依赖变化时执行一次console.log。

2. 手动添加缓存逻辑（不推荐，仅作备选） #

如果确实需要保留data里的getter写法，可以手动给filterAll加缓存，避免重复计算：

data() {
  // 用一个私有变量存储计算结果
  let _cachedFilterAll = null;
  return {
    get filterAll() {
      if (_cachedFilterAll === null) {
        console.log(11111111111);
        _cachedFilterAll = /* 你的计算逻辑 */;
      }
      return _cachedFilterAll;
    },
    // 如果需要修改这个值，添加setter
    set filterAll(newValue) {
      _cachedFilterAll = newValue;
    }
  };
}

不过这种方式不如computed简洁，也不符合Vue的最佳实践，只建议在特殊场景下使用。

3. 检查子组件的Prop使用 #

如果子组件<datafieldcheckbox>内部多次引用了filtervalue prop（比如模板里多处使用、watch监听、内部computed依赖它），也会导致父组件的getter被多次调用。可以在子组件内部把prop缓存为一个computed属性，减少对父组件属性的访问：

// 子组件datafieldcheckbox的配置
computed: {
  localFilterValue() {
    return this.filtervalue;
  }
}

之后子组件内部统一使用localFilterValue即可。

内容的提问来源于stack exchange，提问作者Faizan Saiyed