Vue3中为何将方法返回值赋值给方法参数变量不生效？

你的代码无法正常工作的核心原因是后置自增运算符（num++）的特性：

• num++会先返回变量当前的原始值，再对变量进行递增操作。
• 你传入的number是基本类型数值，在increase方法里是独立的局部变量，就算之后它被递增，也和外部的number无关。所以方法返回的始终是传入的原始值，赋值后number自然不会变化。

解决方法有以下几种： #

1. 改用前置自增运算符

前置自增++num会先完成变量递增，再返回递增后的值，修改increase方法即可：

<script>
export default {
  // ...其他代码不变
  methods: {
    increase(num){
      return ++num
    }
  },
};
</script>

2. 直接返回数值加1的结果

这种写法更直观，避免自增运算符的顺序歧义：

<script>
export default {
  // ...其他代码不变
  methods: {
    increase(num){
      return num + 1
    }
  },
};
</script>

3. 直接操作data中的变量（更简洁的Vue写法）

Vue的methods可以通过this直接访问data属性，完全不用传参，代码更简洁：

<template>
    <h1>{{number}}</h1>
    <button @click="increase">Increase</button>
</template>

<script>
export default {
    data() {
        return {  
           number: 0,
        };
    },
    methods: {
      increase(){
        this.number++
      }
    },
};
</script>

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