Vue.js响应式开发：更新属性前是否需要校验存在性再调用$set？

结论 #

方案二更优，但你提供的方案二代码存在逻辑错误，需要先修正后使用。

代码错误修正 #

你方案二中profIndex !== -1的分支判断逻辑写错了，原本应该判断perc属性是否存在，你误写成了判断整个文件对象是否存在，会导致文件对象存在但没有perc属性时，直接赋值丢失响应性，修正后代码如下：

SettaPerc(fileIndex = -1, profIndex = -1, perc = 0) {
  if (profIndex === -1) {
    const target = this.file[fileIndex]
    if (target.perc === undefined) {
      this.$set(target, "perc", perc);
    } else {
      target.perc = perc
    }
  } else {
    const target = this.file[profIndex].linkondi[fileIndex]
    if (target.perc === undefined) {
      this.$set(target, "perc", perc);
    } else {
      target.perc = perc
    }
  }
}

方案对比 #

1. 功能正确性：两种方案都能保证响应性生效，因为Vue2的$set内部已经内置了属性存在性判断，如果属性已经存在且是响应式属性，会直接赋值返回，所以方案一不会出现功能问题。
2. 性能表现：方案二性能更优，虽然$set内部的判断开销极小，但你的场景是每秒调用一次的高频更新场景，手动前置判断可以跳过$set内部的参数校验、数组逻辑分支判断等额外逻辑，长期运行的性能收益更高。
3. 代码可读性：方案二逻辑更清晰，明确区分了「首次初始化响应式属性」和「后续更新属性值」两个场景，其他维护者可以一眼理解perc属性仅需初始化一次响应性，降低代码理解成本。

额外优化建议 #

如果你的业务逻辑允许，最优方案是在初始化file数组的每一项数据时，直接给对象添加默认值perc: 0，从根源上让属性天生具备响应性，后续更新时不需要任何判断，直接赋值即可，性能和可读性都是最佳的。

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