Vue监测数据总结

vue中绑定数据归结为一下几点

1. vue会监听data中所有层次的数据（会为所有冻结检测的属性生成对应的set，get方法）
2. 如何监测对象中的数据？
   通过setter实现监听，且要在new Vue时就传入要监测的数据
   （1）对象中后追加的属性，Vue默认不做响应式处理
   （2）如需给后添加的属性做响应式，要使用以下API：
   Vue.set(target, propertyName/index, value)或
   vm.$set(target, propertyName/index, value)
   代码如下：

<div class="people">
   <div v-for="(val, key) in people">
       {{ key }} : {{val}}
   </div>
</div>
<button @click="addSex">点我添加性别</button>

//以下是script中的代码
data() {
   return {
       people: { id: '100', name: '张三', age: 18 },
   }
},
methods: {
   addSex() {
       // 任意一种即可实现添加属性sex，并且动态响应
       Vue.set(this.people, 'sex', '男')
       // this.$set(this.people, 'sex', '男')
   }

}

3. 如何监测数组中的数据？
   通过包裹数组更新元素的方法实现，本质就是做了两件事情：
   （1）调用原生对应的方法对数组进行更新
   （2）重新解析模板，进而更新页面

   在Vue中修改数组的某个元素要使用以下方法：

   1. push(), pop(), shift(), unshift(), splice(), sort(), reverse()
   2. Vue.set()或者vm.$set() 特别注意：Vue.set() 和 vm.$set()不能给vm或vm的根数据对象添加属性

data() {
    return {
        peoples: [
            { id: '100', name: '张三', age: 18 },
            { id: '101', name: '李四', age: 20 },
        ],
    }
}

//以下是script中的代码
addSex() {
    // 这种方式修改无效 vue并不能对数组的下标进行动态监听
    // this.peoples[0] = { id: '100', name: '张三', age: 18 , sex: '男'}
    //1. 使用splice可以触发vue的模板更新
    // const newPeople = { id: '100', name: '张三', age: 18, sex: '男' }
    // this.peoples.splice(0, 1, newPeople)
    // 2.使用vm.$set() 或者 Vue.set() 同样可以触发模板更新
    this.$set(this.peoples[0], 'sex', '男')

}