传参为什么会被改变变量vue

参数传递是指将数据从一个变量传递给另一个变量或函数。在Vue中，参数可以通过值传递或引用传递。通过值传递时，传递的是数据的副本，而通过引用传递时，传递的是数据的引用。

当将一个变量作为参数传递给Vue组件时，如果传递的是基本数据类型（例如数字、字符串等），则会通过值传递。这意味着接收参数的变量会创建一个新的副本，而不会影响原始变量。因此，无论如何改变该变量的值，原始变量都不会受到影响。

然而，当传递的参数是引用类型（例如对象、数组等）时，会通过引用传递。这意味着接收参数的变量将引用相同的对象，而不是创建一个新的副本。因此，如果在组件内部改变接收参数的变量的属性或元素，原始变量也会受到影响。这是因为它们引用同一个对象。

例如，下面是一个Vue组件的示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Goodbye";
    },
  },
};
</script>

在这个例子中，当点击“Change Message”按钮时，调用changeMessage方法将message变量的值改为"Goodbye"。这只会影响组件内部的message变量，而不会改变传递给组件的原始变量。

综上所述，参数传递中的变量在Vue中可能被改变是因为引用传递的特性。通过引用传递，组件可以直接修改传递给它的参数的属性或元素，从而影响原始变量。

在Vue中，当我们将一个变量作为参数传递给一个函数或方法时，实际上是将该变量的引用传递给函数，而不是将变量本身传递给函数。这意味着在函数内部修改参数的值时，原始变量的值也会被修改。

这种行为是因为JavaScript中的函数参数传递方式是按值传递的，但是对于引用类型的参数，传递的是该对象的引用。因此，当我们在Vue中传递一个变量作为参数时，实际上是传递该变量的引用给函数。

以下是引起传参被改变的几种情况：

1. 对象参数被改变：如果我们将一个对象作为参数传递给函数，函数可以修改该对象的属性或添加新的属性，这将直接影响到原始对象。

例如：

var obj = { name: 'John' };

function changeName(obj) {
  obj.name = 'Alice';
}

changeName(obj);

console.log(obj.name);  // 输出 'Alice'

在这个例子中，changeName函数接收一个对象参数，并将该对象的name属性改为'Alice'。由于传递的是引用，所以修改参数对象的name属性会影响到原始对象。

2. 数组参数被改变：与对象参数类似，如果我们将一个数组作为参数传递给函数，函数可以修改该数组的元素或添加新的元素，原始数组也会被修改。

例如：

var arr = [1, 2, 3];

function addElement(arr, element) {
  arr.push(element);
}

addElement(arr, 4);

console.log(arr);  // 输出 [1, 2, 3, 4]

在这个例子中，addElement函数接收一个数组参数，并使用push方法将新元素添加到参数数组中。由于传递的是引用，所以修改参数数组会影响到原始数组。

3. 特殊情况：当传递的参数是基本数据类型（例如字符串、数字、布尔值）时，传参不会改变原始变量的值。因为基本数据类型是按值传递的，函数只会对传入的参数进行拷贝操作，而不会影响原始变量。

例如：

var num = 10;

function double(num) {
  num = num * 2;
}

double(num);

console.log(num);  // 输出 10

在这个例子中，double函数接收一个数字参数，并将参数的值翻倍。因为传递的是基本数据类型，函数内部的修改不会影响原始变量的值。

总结来说，Vue中传参被改变变量是因为JavaScript中的函数参数传递方式是按引用传递的。传递引用类型的参数时，函数可以修改该参数，从而影响到原始变量。但传递基本数据类型的参数时，函数只是对参数进行拷贝操作，不会对原始变量产生影响。

在Vue中，传递参数的行为与传递JavaScript中的普通变量是一样的。当我们将一个变量传递给Vue组件或方法时，实际上是传递了变量的引用。因此，如果在组件或方法内部修改了传递的参数，那么原始变量也会被修改。

这种行为是由JavaScript中的引用传递机制导致的。简单来说，当我们将一个变量传递给函数或组件时，实际上传递的是变量在内存中的地址，而不是变量本身的值。所以，当我们在函数或组件内部修改了这个变量，实际上是修改了这个地址所指向的内存中的数据，进而影响了原始变量的值。

例如，我们有一个Vue组件接收一个数据属性作为参数，并在组件内部对该属性进行修改：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    message: String
  },
  methods: {
    changeMessage() {
      this.message = 'New Message';
    }
  }
}
</script>

在上面的代码中，我们通过props将一个名为message的属性传递给了MyComponent组件。然后，在组件的方法changeMessage中，我们试图修改这个属性的值为'New Message'。然而，这是不允许的，因为Vue组件中的props属性是只读的。如果我们这样做，Vue会发出一个警告并阻止我们对props属性进行修改。

所以，传递参数被改变是由于我们在Vue组件或方法中试图修改了这个参数。如果我们想要在Vue组件中修改传递的参数，我们应该将它们定义为组件的data属性或使用计算属性来处理。这样，我们就可以在Vue组件内部修改这些属性，而不会影响原始的变量。