为什么自增运算符的位置会影响Vue3封装useCounter的运行效果？

原理说明 #

这个问题和Vue3无关，本质是JavaScript中前置自增运算符和后置自增运算符的返回值规则不同导致的：

• ++num 属于前置自增：执行逻辑是先将变量数值+1，再返回+1后的最新值
• num++ 属于后置自增：执行逻辑是先返回变量当前的原始值，再将变量数值+1

你代码中的incrementCounter函数是直接返回自增运算的结果，当使用num++时，返回给emit的是+1之前的旧值，父组件接收的数值没有变化，所以看起来计数没有生效。

简单验证示例 #

let test1 = 10
console.log(++test1) // 输出11，运算后test1的值为11

let test2 = 10
console.log(test2++) // 输出10，运算后test2的值才变为11

替代写法 #

如果想要使用后置自增也能正常生效，可以修改函数逻辑，确保返回+1后的新值即可：

const incrementCounter = (num: number): number => {
    num++;
    return num;
};

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