在 Vue 中调用方法传入值，并在方法执行期间修改传入的值，是否会影响方法内部的值，取决于传入值的类型

---

一、前言

在 Vue 中调用方法传入值，并在方法执行期间修改传入的值，是否会影响方法内部的值，取决于传入值的类型。

1. 传入基本类型值（如数字、字符串）

如果你传入的是基本类型的值（例如数字、字符串），在方法内部修改这些值不会影响到传入的原始数据。这是因为在 JavaScript 中，基本类型的数据是按值传递的，方法内部的修改只会影响方法内部的副本，而不会影响到外部的原始值。

示例：

// 父组件
<template>
  <div>
    <button @click="updateValue(value)">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10
    };
  },
  methods: {
    updateValue(val) {
      val = 20; // 这里修改的是方法内部的副本，不会影响到 this.value
      console.log(val); // 输出 20
      console.log(this.value); // 输出 10
    }
  }
};
</script>

2.传入引用类型值（如对象、数组）

如果你传入的是引用类型的值（例如对象、数组），在方法内部修改这些值会影响到原始数据，因为引用类型的数据在 JavaScript 中是按引用传递的。这意味着，方法内部对对象或数组的修改会直接影响到传入的原始对象或数组。

示例：

// 父组件
<template>
  <div>
    <button @click="updateValue(obj)">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: 'Alice', age: 25 }
    };
  },
  methods: {
    updateValue(obj) {
      obj.age = 30; // 这里修改的是方法内部传入的引用，会影响到 this.obj
      console.log(obj); // 输出 { name: 'Alice', age: 30 }
      console.log(this.obj); // 输出 { name: 'Alice', age: 30 }
    }
  }
};
</script>

因此，如果你在 Vue 组件中调用方法并传入值，方法内部对传入的数据的修改，是否会影响到原始数据，取决于传入值的类型。