求VUE3中，子组件修改props会影响父组件的解决方法？

Question

解决思路是深拷贝，但不知道大家有是怎么做的，蹲一个优雅实践！
VUE2的时候官方示例是用计算属性来解决，但是我在VUE3中这样做：

const childredObj = ref(computed(() => {return props.fatherObj}))

子组件修改childredObj还是会影响到父组件里fatherObj的值！
直接这么写也不行：

const childredObj = ref(props.fatherObj})

有效的办法是JSON.parse(JSON.stringfy(props.fatherObj))，但感觉不够优雅。。。
或者直接写个deep copy的方法拿来用？不知道VUE3有没有提供官方解决方法？

Answer 1

似乎只能深拷贝，但 JSON.parse 和 JSON.stringfy 的方式具有缺陷，要注意。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

lodash .cloneDeep

Answer 3

vue2 大概率也是不行的。。（PS：最近问题太多了， 你可以往上翻一下，有个vue2计算属性被改值了）

这种只能深拷贝。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

计算属性得出的值你就不要想着去修改就行了，所有计算属性的修改都应该修改依赖的值。依赖的值来自父组件传过来的就使用事件去传递值再修改

Answer 5

在Vue 3中，确实不建议直接修改props，因为它可能导致难以预料的副作用。为了避免这种情况，你可以使用以下方法之一来解决问题：

使用 watch 或 watchEffect 创建副本
在Vue 3中，你可以使用watch或watchEffect来监视props的变化，并在需要时创建新的副本。例如：

javascript
Copy code
import { ref, watchEffect } from 'vue';

export default {
  props: ['fatherObj'],
  setup(props) {
    const childObj = ref(null);

    watchEffect(() => {
      childObj.value = { ...props.fatherObj };
    });

    // 然后在子组件中使用childObj，这样就不会影响到父组件的fatherObj
  },
};

这样，你可以在子组件中修改childObj，而不会影响到父组件的fatherObj。

使用 computed 创建副本
你可以使用computed属性创建一个对象副本。但是，需要注意的是，computed属性默认是只读的，所以你需要使用ref包装一下：

import { computed, ref } from 'vue';

export default {
  props: ['fatherObj'],
  setup(props) {
    const childObj = ref({ ...computed(() => props.fatherObj).value });

    // 然后在子组件中使用childObj，这样就不会影响到父组件的fatherObj
  },
};

使用深拷贝
如果你的对象具有嵌套结构，你可以考虑使用深拷贝（如你提到的JSON.parse(JSON.stringify(obj))或者一个深拷贝函数）来创建一个完全独立的副本。这种方法可能不是最优雅的，但在某些情况下可能是必要的。

import { ref } from 'vue';

export default {
  props: ['fatherObj'],
  setup(props) {
    const childObj = ref(JSON.parse(JSON.stringify(props.fatherObj)));

    // 然后在子组件中使用childObj，这样就不会影响到父组件的fatherObj
  },
};

总之，根据你的需求和项目结构，可以选择上述方法中的任意一种来避免在子组件中直接修改props。