Vue父子组件传值时，如何避免陷入数据双向绑定和生命周期钩子冲突的深坑？

本文共计2185个文字，预计阅读时间需要9分钟。

在Vue父子组件传值时，遇到子组件修改值后父组件值也随之下变的冷门问题。子组件修改值后，父组件的值也随机改变，原因及解决方法如下：

原因：子组件通过props接收父组件传递的值，若在子组件内部修改了该值，则父组件也会接收到修改后的值。

解决方法：

1.使用事件传递修改后的值给父组件，而不是直接修改props。

2.使用Vue的响应式系统，通过计算属性或watcher来监听props的变化，并作出相应处理。

系统梳理下JavaScript的深拷贝与浅拷贝相关知识：

1. 浅拷贝：只复制对象或数组的第一层属性，不复制引用类型。

2.深拷贝：复制对象或数组的所有属性，包括引用类型。

实现方式：

1.浅拷贝：使用Object.assign()、扩展运算符(...)、slice()等方法。

2.深拷贝：使用JSON.parse(JSON.stringify(obj))、递归拷贝等方法。

在用 Vue 的父子组件传值时遇到一个冷门的问题，子组件改变值后父组件的值也随之改变了，特此记录下原因和解决方式。
再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点。