Vue.js中Mustache绑定赋值逻辑疑问：为何{{tableData[props.index-1]=props.index}}返回右侧值

这个问题其实核心是JavaScript赋值表达式的固有特性，而非Mustache的特殊处理——咱们一步步拆解来理解：

1. JavaScript赋值表达式的返回规则 #

在JavaScript里，任何赋值表达式（比如a = b、arr[i] = val、obj.key = val）的执行逻辑都是：

• 先将右侧的值赋给左侧的变量/数组元素/对象属性
• 然后整个表达式的返回值就是右侧被赋予的值，而不是左侧的目标对象或变量

举个简单的例子验证：

let arr = [];
// 执行赋值表达式，同时打印表达式的返回值
console.log(arr[0] = 100); // 输出：100，而不是arr[0]这个元素对象

2. Mustache对表达式的处理逻辑 #

Mustache虽然号称“无逻辑模板”，但它会将{{ }}标签内的内容当作JavaScript表达式去求值，最终把表达式的返回值渲染到页面中。

回到你的代码{{tableData[props.index-1] = props.index }}：

• 首先执行赋值操作：把props.index的值赋给tableData[props.index-1]
• 然后Mustache获取这个赋值表达式的返回值（也就是props.index），并将其渲染输出

这就是为什么你看到的是右侧的props.index，而非左侧的数组元素对象。

3. 如果想返回左侧对象该怎么做？ #

如果你希望Mustache渲染左侧的tableData[props.index-1]，可以利用JavaScript的逗号运算符——逗号运算符会依次执行多个表达式，最终返回最后一个表达式的结果：

{{ (tableData[props.index-1] = props.index, tableData[props.index-1]) }}

不过这种写法可读性较差，更推荐的方式是在模板外部完成赋值操作，模板里直接引用目标数组元素即可，比如：

// 外部逻辑中完成赋值
tableData[props.index-1] = props.index;

然后模板里直接写：

{{ tableData[props.index-1] }}

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