如何优雅批量设置多个响应式状态的布尔值？

你写的两种批量赋值写法不生效是JavaScript原生语法特性导致的，和Vue的响应式机制无关：

• state.val1, state.val2 = false 用到了逗号操作符，该操作符会从左到右依次执行每个表达式，最终仅返回最后一个表达式的执行结果，整行代码实际等价于先读取了一次state.val1（没有任何赋值操作），再执行state.val2 = false，自然只有val2会被修改。
• state['val1', 'val2'] = false 方括号内的逗号同样会触发逗号操作符逻辑，最终方括号的计算结果只有最后一个值'val2'，整行代码等价于state['val2'] = false，也达不到批量赋值的效果。

方案1：抽离赋值逻辑到组件方法（最推荐，可维护性最高） #

当需要修改的状态超过2个时，不要把赋值逻辑堆在模板内联表达式里，抽成独立方法后续改逻辑、加状态都更方便：

<button @click="setStatesToFalse">click me</button>
<p>{{state.val1}}</p>
<p>{{state.val2}}</p>
<p>{{state.val3}}</p>

// 脚本内定义方法
const setStatesToFalse = () => {
  // 要改的状态多的话可以用循环简化，不用逐行写赋值
  ['val1', 'val2', 'val3'].forEach(key => {
    state[key] = false
  })
}

如果后续要新增、删除需要修改的状态，只需要改方法里的数组即可，模板完全不用动。

方案2：内联表达式简化写法 #

如果不想额外抽方法，也可以直接在内联表达式里写批量逻辑，适合状态少的简单场景：

<!-- 循环批量赋值 -->
<button @click="() => ['val1', 'val2', 'val3'].forEach(k => state[k] = false)">click me</button>

<!-- 用Object.assign合并属性，注意不要直接替换整个state对象，会丢失响应式 -->
<button @click="Object.assign(state, {val1: false, val2: false, val3: false})">click me</button>

注意：不管用哪种写法，都不要直接给state整个重新赋值（比如state = {val1: false...}），直接替换响应式根对象会导致响应式绑定失效。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov