vue监视数据的原理、收集表单数据
一、vue监视数据的原理
- vue会监视data中所有层次的数据
- 如何检测对象中的数据？通过setter实现监视，且要在new vue时就传入要检测的数据
- 对象中后追加的属性，vue默认不做响应式处理
- 如需给后添加的属性做响应式，请使用如下API：
- vue.set（target, propertyName/index ,value）
- vm.$set(target , propertyName/index ,value)
- 如何监测数组中的数据？通过包裹数组更新元素的方法实现
- 调用原生对应的方法对数组进行更新
- 重新解析模版，进而更新页面
- 在vue中修改数组中的某一个元素一定要用如下方法：
- 使用这些API：push(),shift(),unshift(),splice(),sort(),reverse()
- vue.set()或者vm.$set()
- 注意：vue.set和vm.$set()不能给vm或vm的根数据对象添加属性
二、收集表单数据
若<input type = "text" />，则v-model收集的是value值，用户输入的就是value值。
若<input type = "radio" />,则v-model收集的是value值，且要给标签配置value值。
若<input type = "checkbox" />
- 没有配置input的value属性，那么收集的就是checked（布尔值）
- 配置input的value属性：
- v-model的初始值是非数组，那么收集的就是checked（bool值）
- v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效数字
trim：输入收尾空格过滤