vue监视数据的原理、收集表单数据

一、vue监视数据的原理

1. vue会监视data中所有层次的数据
2. 如何检测对象中的数据？通过setter实现监视，且要在new vue时就传入要检测的数据
   1. 对象中后追加的属性，vue默认不做响应式处理
   2. 如需给后添加的属性做响应式，请使用如下API：
      1.  vue.set（target, propertyName/index ,value）
      2. vm.$set(target , propertyName/index ,value)
3. 如何监测数组中的数据？通过包裹数组更新元素的方法实现
   1. 调用原生对应的方法对数组进行更新
   2. 重新解析模版，进而更新页面
4. 在vue中修改数组中的某一个元素一定要用如下方法：
   1. 使用这些API：push(),shift(),unshift(),splice(),sort(),reverse()
   2. vue.set()或者vm.$set()
5. 注意：vue.set和vm.$set()不能给vm或vm的根数据对象添加属性

二、收集表单数据

若<input type = "text" />，则v-model收集的是value值，用户输入的就是value值。

若<input type = "radio" />,则v-model收集的是value值，且要给标签配置value值。

若<input type = "checkbox" />

1. 没有配置input的value属性，那么收集的就是checked（布尔值）
2. 配置input的value属性：
   1. v-model的初始值是非数组，那么收集的就是checked（bool值）
   2. v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

          lazy：失去焦点再收集数据

          number：输入字符串转为有效数字

          trim：输入收尾空格过滤