【vue开发问题-解决方法】（十一）数据双向绑定导致修改数据格式原数据绑定出错

数据双向绑定导致的问题

填写表单后获取到checkbox的值是数组格式，但是在传递保存过程中，把获取到的数据改为字符串格式，以,号分隔。但是这里出现一个问题，我修改格式后绑定的数据格式也改变了，即便我修改的是用重新定义的变量接收的。所以需要使用以下方法来进行纠正。

例如

//表单中的checkbox，绑定QQLX
<el-checkbox-group   id="QQLX"  name="QQLX" v-model="QQLX"  :disabled="IsReadOnly.QQLX">
  <el-checkbox v-for="item in FieldSource.QQLX" :key="item.index" :label="item.Value" >{{item.Text}}</el-checkbox>
 </el-checkbox-group>
 
//方法中获取QQLX的值为数组[1,2,3,4]
let Arr = QQLX;

//对Arr的值进行处理 格式修改为 "1,2,3,4"
//解决数据双向绑定导致的类型变化报错问题
let Obj = JSON.parse(JSON.stringify(Arr));
let str = "";
Obj.forEach((item, index, arr) => {
    str += item;
    if (index < arr.length - 1) {
        str += ",";
    }
});
Obj = str;//"1,2,3,4"

双向绑定

• data -----> view 数据变化更新视图（Object.defineProperty()）
• view -----> data 视图变化更新数据（事件监听）

 vue.js采用数据劫持+发布者-订阅者模式，通过Object.defineProperty()来劫持每个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

实现原理

首先要对数据进行劫持监听，所以需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以需要有一个消息订阅器Dep专门来收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。
接着，还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。
主要为以下3个步骤，实现数据的双向绑定：

1. 一个监听器Observer，用来劫持并监听所有属性（vue中的data选项），如果有变动的，就通知订阅者。
2. 一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据指令模版替换数据，绑定相应的更新函数。
3. 一个订阅者Watcher，可以收到属性的变化通知并执行指令绑定的函数，从而更新视图。