Vue 中 props 传值，父组件向子组件传递对象/数组可以直接修改的问题

快来打我* 2023-10-04 18:45 2阅读 0赞

vue 中父子组件通信最常用的方式是 props 和 $emit，所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图变更一个 prop 的情形：

1、**这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。**在这种情况下，最好定义一个本地的 data property 并将这个 prop 作为其初始值：

props: ['initialCounter'],
    data() {
        return {
            counter: this.initialCounter
        }
    }

2、**这个 prop 以一种原始的值传入且需要进行转换。**在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['size'],
    computed: {
        normalizedSize() {
            return this.size.trim().toLowerCase()
        }
    }

#### 重点： ####

> 在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，当父组件的传值是对象或者数组时，在子组件中改变这个对象或数组本身将会影响到父组件的状态，且 Vue 无法为此向你发出警告或者报错，`作为一个通用规则，应该避免修改任何 prop`，包括对象和数组，因为这种做法无视了单向数据绑定，且可能会导致意料之外的结果。

接下来分析下出现这种情况的原因：

**一、JavaScript 数据类型**

> 基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol  
> 引用数据类型：对象(Object)、数组(Array)、函数(Function)

**二、内存空间**  
要理解 JavaScript 在运行过程中数据是如何存储的，就得先搞清楚其存储空间的种类

在 JavaScript 的执行过程中， 主要有**三种类型内存空间**，分别是**代码内存空间、栈内存空间 和 堆内存空间**，其中的**代码内存空间**主要是存储可执行代码的，**栈内存空间**就是调用栈，是用来存储执行上下文的，**堆内存空间**是用来储存引用数据类型的，`简单来说就是 JS 执行的时候，会把基本类型的数据保存在 栈内存空间 中，引用类型的数据保存在 堆内存空间 中`

// 基本数据类型-栈内存
    let a1 = 0;
    // 基本数据类型-栈内存
    let a2 = 'this is string';
    // 基本数据类型-栈内存
    let a3 = null;
    // 对象的指针存放在栈内存中，指针指向的对象存放在堆内存中
    let b = { m: 20 };
    // 数组的指针存放在栈内存中，指针指向的数组存放在堆内存中
    let c = [1, 2, 3];

![469fe6ee3df34053baa3da9589b079f0.png][]

从上图可以看到，对象类型是存放在堆空间的，在栈空间中只是保留了对象的引用地址，当 JavaScript 需要访问该数据的时候，是通过栈中的引用地址来访问的，所以，父组件传递给子组件的，实际上只是一个引用地址，当子组件修改这个对象时，是真的修改了在堆空间中保存的数值，当然父组件中的值也会发生变化，但是引用地址没有进行修改，所以并没有报错。

上面简要分析了一下 vue 组件通信中，父组件传一个对象给子组件，子组件可以直接修改这个数据，并且可以影响父组件的问题，里面涉及到堆空间、栈空间等 JavaScript 数据类型以及浏览器底层原理的东西，感兴趣的话可以阅读一下相关知识点。

[469fe6ee3df34053baa3da9589b079f0.png]: https://img-blog.csdnimg.cn/469fe6ee3df34053baa3da9589b079f0.png