Vue.js 2计算属性括号包裹逗号分隔多返回值写法作用解析

你碰到的不是什么特殊框架语法，是JavaScript原生特性加Vue2响应式机制凑出来的批量监听hack，在早期Vue2项目里非常常见。

逗号操作符的行为 #

JavaScript的逗号操作符逻辑非常明确：

• 从左到右依次执行所有被逗号分隔的表达式
• 整串表达式最终只返回最后一个表达式的执行结果

对应你贴出的计算属性代码：

compoundFormProperty: function() {
    return (
        this.deliveryName,
        this.deliveryCity,
        this.deliveryAddress,
        this.deliveryState,
        this.deliveryCountry,
        this.deliveryPostal,
        Date.now()
    );
}

这个计算属性的实际返回值永远是Date.now()生成的当前时间戳，前面列的6个配送地址相关字段，根本不会作为结果返回。

这个计算属性的真实作用 #

这个写法完全是为了适配Vue2本身的机制实现多数据源统一监听：

• Vue2的计算属性自带响应式依赖收集能力：只要getter函数执行过程中访问过的响应式数据发生变化，就会触发计算属性重新求值
• Vue2的计算属性自带值缓存，如果两次求值的返回值完全相等，绑定在它上面的watcher不会触发
• Vue2原生不支持给单个watcher配置多个监听源，如果要实现“N个字段任意一个变化都触发同一段校验逻辑”，要么给每个字段单独写重复的watcher调用同一个方法，要么就用这种取巧的方案减少冗余代码。

这个compoundFormProperty从设计之初就没打算给模板或者其他业务逻辑使用返回值，它的唯一作用就是把所有需要监听的配送表单字段都放到getter执行上下文里，让Vue能收集到全量依赖。末尾加Date.now()的目的，就是保证计算属性每次因依赖变动重算时，返回值永远和上一次不同，彻底避免因缓存导致watcher不触发的问题。

和你观察到的现象对应 #

你之前的推测完全准确：

• 全局检索不到这个计算属性的其他引用、模板中也没有使用是正常情况，它就是专门服务于对应watcher的依赖收集器
• 它的核心作用就是追踪所有配送地址表单字段的变化，一旦任意字段变动就触发watcher中的表单有效性校验逻辑，对外抛出校验结果事件，和你猜测的用途完全一致。

这个写法的缺陷 #

这种写法属于能跑但工程化表现很差的hack方案：

• 可读性极差，不了解逗号操作符和Vue2响应式原理的维护者很难第一时间看懂代码意图
• 没有配套注释的话，后续迭代很容易误删getter里列的依赖字段，导致校验逻辑失效
• 如果后续升级到Vue3完全不需要这种写法，Vue3的watch原生支持传入由多个监听源组成的数组，直接声明需要监听的字段即可。

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