vue2.0干货总结——来自于b站

vue2.0

vue2.0

❓：1. 如何监测对象中的数据？

通过setter实现监视，且要在new Vue 时传入监测的数据
（1）、 对象中后追加的属性，vue默认不做响应式处理
（2）、 如需给后添加的属性做响应式处理，使用如下方式
/* Vue.set(target,propertyName/index,value) */
        Vue.set(obj, 'newKey', value)
        Vue.set(obj, ['newKey'], value)
        Vue.$set(obj, {newKey: value})
        Vue.$set(obj, ['newKey'], value)

❓：2. 如何监测数组中的数据

通过包裹数组更新元素的方法实现，本质就两件事：
    （1）、 调用原生对应的方法去对数组进行更新
    （2）、 重新解析模版，从而更新页面
    // 通过push、pop、shift、unshift、splice、sort、reverse等方法实现监视
    // Vue.set() / Vue.$set() 
    // 注意： Vue.set() / Vue.$set() 不能给vm / vm 的根数据对象 添加属性

❓：v-model 根据不同的输入类型，会自动设置不同的属性

💡：
收集表单数据：
（1）、若：<input type="text"/>
      则v-model收集的是value值，用户输入的就是value值。
（2）、若： <input type="radio"/>
      则v-model收集的是value值，且要给标签配置value值。
（3）、若： <input type="checkbox"/>
    1、没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
    2.配置input的value属性：
    (1)、v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选。是布尔值)
    (2)、v-model的初始值是数组，那么收集的的就是value组成的数组
备注： v-model的三个修饰符：
    lazy：失去焦点再收集数据
    number：输入字符串转为有效的数字
    trim：输入首尾空格过滤