数据双向绑定导致的问题
填写表单后获取到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,可以收到属性的变化通知并执行指令绑定的函数,从而更新视图。