js a赋值给b 修改b会影响a

当你在组件内部直接操作`data`里的变量`b`，然后在表单验证过程中再次设置`a = b`，这实际上是创建了一个新的引用，而不是复制变量的值，所以第二次修改`b`会影响到`a`。 为了解决这个问题，你可以采取以下策略： ...

### 解决 Vue 中 `watch` 监听时深拷贝变量 在 Vue 3 的开发过程中，当使用 `watch` 来监听某个响应式对象并将其赋值给另一个变量时，默认行为会使得两个变量共享同一个引用。这意味着修改其中一个变量会影响到另一个变量。为了避免这种情况的发生，可以采用深拷贝的方式来进行赋值。 #### 使用 JSON.parse 和 JSON.stringify 进行深拷贝 一种简单的方法是利用 JavaScript 自带的 `JSON.parse(JSON.stringify())` 方法来实现深拷贝： ```javascript import { ref, reactive, watch } from 'vue'; export default { setup() { const sourceData = reactive({ name: "Alice", address: { city: "Wonderland" } }); let targetData = null; watch(sourceData, () => { // 实现深拷贝 targetData = JSON.parse(JSON.stringify(sourceData)); console.log('sourceData:', sourceData); console.log('targetData:', targetData); }, { deep: true }); function changeSource() { sourceData.address.city = "New City"; } return { sourceData, targetData, changeSource }; }, }; ``` 这种方法适用于大多数情况下的数据结构[^1]。 #### 使用 lodash 库中的 cloneDeep 函数 对于更复杂的数据结构或含有循环引用的情况，推荐使用第三方库如 Lodash 提供的 `cloneDeep()` 函数来进行深拷贝操作： 首先安装 Lodash: ```bash npm install lodash ``` 然后可以在项目中这样使用： ```javascript import _ from 'lodash'; import { ref, reactive, watch } from 'vue'; export default { setup() { const sourceData = reactive({ name: "Bob", hobbies: ["reading", "coding"], profile: { age: 28, skills: new Set(['JavaScript', 'Python']) } }); let targetData = null; watch(sourceData, () => { // 使用 lodash 的 cloneDeep 方法进行深拷贝 targetData = _.cloneDeep(sourceData); console.log('sourceData:', sourceData); console.log('targetData:', targetData); }, { deep: true }); function updateProfileAge(newAge) { sourceData.profile.age = newAge; } return { sourceData, targetData, updateProfileAge }; }, }; ``` 这种方式能够更好地处理复杂的嵌套对象以及特殊类型的属性（比如日期、正则表达式等）[^2]。