Vue绑定变量，避免直接引用，使用浅拷贝

问题描述

在 getParam() 获取传给后端的参数的方法中，直接使用 let data = this.form ，并且修改data值后会导致表单校验不断触发，影响性能和用户体验。改为 let data = Object.assign({}, this.form) 后问题解决。

问题原因

• 直接引用问题：let data = this.form 时，data 和 this.form 指向同一个对象。Vue 的响应式系统会监听 this.form 的变化，而 data 的变化也会触发 this.form 的变化，导致校验逻辑被不断触发。

• 浅拷贝解决：使用 Object.assign({}, this.form) 创建了一个新的对象 data，避免了直接引用 this.form，从而避免了不必要的校验触发。

解决方案

• 避免直接引用：在需要使用 this.form 数据时，尽量避免直接引用，使用浅拷贝或深拷贝创建新对象。

• 浅拷贝方式：

  JavaScript复制

  let data = Object.assign({}, this.form);

• 深拷贝方式（适用于嵌套对象）：

  JavaScript复制

  let data = JSON.parse(JSON.stringify(this.form));

开发经验

1. 理解 Vue 的响应式机制
   Vue 通过 Object.defineProperty 实现响应式，直接引用对象会导致数据变化被监听，从而触发不必要的校验或更新。

2. 使用浅拷贝或深拷贝
   当需要操作数据但不希望触发响应式更新时，使用浅拷贝（Object.assign）或深拷贝（JSON.parse(JSON.stringify())）创建新对象。

3. 注意性能优化
   频繁触发校验会影响性能，尤其是在表单字段较多或校验逻辑复杂时，应尽量减少不必要的校验触发。

4. 代码可读性
   使用 Object.assign 或其他拷贝方法时，确保代码清晰易读，便于后续维护。