vue3中props中的值赋值到某个reactive参数是深拷贝还是浅拷贝

[Juken8104]

1. props中的值赋值到某个reactive参数是深拷贝还是浅拷贝
2. 代码片段如下，我想知道下边的变量是深拷贝还是浅拷贝。我用子组件来触发update:modelValue的事件更新currentSectionOne或者currentSectionTwo的值。对应的props数据也会更新
   
   

[edison1105]

这肯定是浅拷贝啊。

[Juken8104]

1. 这里是我简单一个props更新的demo。 地址
2. 数据更新步骤如下

• customrInput子组件触发更新了middleComponent中的props数据。
• middleComponent子组件并没有触发更新App中的props数据。但实际上props中的数据更新了。

3. 疑问

• 我实验下来是由于这个特定的数组结构触发的。那再vue中，这种结构的数组是怎么存储的，为什么会发生这样的数据更新

[edison1105]

const myTest = reactive({
      layer: [{ value: 1111 }, { value: 1111 }, { value: 1111 }],
    });

layer 是个对象，是引用类型。所以无论哪里改了layer，改的都是同一份数据。如果想要子组件改layer不影响父组件，对其进行深拷贝即可。这是 js 基础知识。