2 通过以上问题 - 我们引出 Vue监测数据的原理_对象
Vue监视数据的原理主要通过数据劫持和发布订阅模式实现。
具体地，Vue在实例化时，会将data对象中的所有属性收集到vm._data中，属性值不再直接给出，而是通过响应式获取，当data中数据改变时，就会调用响应式，导致重新解析模板，然后生成新的虚拟DOM进行新旧DOM对比，最后更新页面。
对于对象的数据监视，Vue通过实现数据监视，需要在new Vue时就传入要监测的数据。对于后添加的属性，需要通过Vue.set()或this.$set()方法来给后添加的属性做响应式处理。
对于数组中的数据监视，Vue通过包裹数组更新元素的方法实现数据监视。在这个过程中，Vue会调用原生对应的方法对数组进行更新，并在此过程中重新解析模板、更新页面。
1 通过更新时的一个问题-this.[0] = { 更新值 } 不起作用 引入
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js">script>
head>
<body>
<div id="v-for"><button @click="updateMei">更新马冬梅的信息button><ul><li v-for="(item, index) of personList" :key="item.id">{{ item.name }} - {{ item.age }}li>ul>div>
<script type="text/javascript">let vm = new Vue({el: '#v-for',data: {personList: [{id: '001', name: '马冬梅', age: 19, sex: '女'},{id: '002', name: '周冬雨', age: 24, sex: '女'},{id: '003', name: '周杰伦', age: 55, sex: '男'},{id: '004', name: '温兆伦', age: 12, sex: '男'}]},methods: {updateMei() {/*this.personList[0].name = '马保国'this.personList[0].age = 50this.personList[0].sex = '男'*/// ok 如上是起作用的this.personList[0] = {id: '001', name: '马保国', age: 50, sex: '男'}}}})
script>
body>
html>
2 通过以上问题 - 我们引出 Vue监测数据的原理_对象
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head>
<body>
<script type="text/javascript">let data = {name: '尚硅谷',address: '北京',}// 创建一个监视的实例对象，用于监视data中属性的变化const obs = new Observer(data)console.log(obs)// 准备一个vm实例对象let vm = {}vm._data = data = obsfunction Observer(obj) {// 汇总对象中所有的属性const keys = Object.keys(obj)// 遍历keys.forEach((k) => {Object.defineProperty(this, k, {get() {return obj[k]},set(val) {console.log('${k}被改了，我要去解析模板，生成虚拟DOM...我要开始忙了')obj[k] = val}})})}script>
body>
html>
Vue监测数据的原理，就是靠。只要修改数据，Vue就会重新解析模板，生成虚拟DOM。
2.1 Vue.set()方法 Vue.set()方法是Vue中用于给响应式对象添加一个属性，并确保新属性同样是响应式的，触发视图更新。Vue.set()方法接收三个参数：第一个参数是目标对象，第二个参数是要添加的属性名，第三个参数是属性的值。
例如，假设我们有一个Vue实例，其data对象中包含一个名为“obj”的对象，我们可以使用Vue.set()方法给“obj”对象添加一个名为“”的属性，代码如下：
this.$set(this.obj, 'newProp', 'value');
在这个例子中，我们使用this.$set()方法给this.obj对象添加了一个名为“”的属性，并将其值设置为“value”。由于Vue.set()方法会确保新属性同样是响应式的，所以当我们修改“”的值时，Vue会自动更新视图。
另外需要注意的是，Vue.set()方法也可以用于给响应式对象添加多个属性，只需要在第二个参数中传入一个包含属性名的数组即可。例如：
this.$set(this.obj, ['newProp1', 'newProp2'], ['value1', 'value2']);
以上代码中，我们使用this.$set()方法给this.obj对象添加了两个属性，分别是“”和“”，并将它们的值分别设置为“”和“”。同样地，当我们修改这两个属性的值时，Vue会自动更新视图。
假设数组a中不存在对象b，Vue中访问a.b不会报错，只是不显示（Vue中默认不显示），Vue中访问b会报错。
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js">script>
head>
<body>
<div id="v-set"><h1>学生信息h1><button @click="addSex">添加一个性别属性，默认值是男button><h2>姓名：{{ student.name }}h2><h2>性别：{{ student.sex }}h2>
div><script type="text/javascript">Vue.config.productionTip = falselet vm = new Vue({el: '#v-set',data: {student: {name: 'tom',}},methods: {addSex() {// Vue.set(this.student,'sex','男')this.$set(this.student, 'sex', '男')}},})
script>
body>
html>2.2 Vue监测数据的原理_数组
原生数组使用的方法，例如push，就是从Array原型中找到的。可用 arr.push === Array..push 验证。而Vue中的push却不等于 Array..push ，因为Vue中的push是经过包装的。
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js">script>
head>
<body>
<div id="ddd"><h1>学生信息h1><h2>爱好：h2><ul><li v-for="(item, index) in student.hobby" :key="index">{{ item }}li>ul>
div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#ddd',data: {student: {name: 'tom',age: 18,hobby: ['抽烟', '喝酒', '烫头'],friends: [{name: 'jerry', age: 35},{name: 'tony', age: 36}]}},methods: {},})
script>
body>
html>
针对于上面的数组，有了解决方案：如下
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js">script>
head>
<body>
<div id="v-for"><button @click="updateMei">更新马冬梅的信息button><ul><li v-for="(item, index) of personList" :key="item.id">{{ item.name }} - {{ item.age }}li>ul>div>
<script type="text/javascript">let vm = new Vue({el: '#v-for',data: {personList: [{id: '001', name: '马冬梅', age: 19, sex: '女'},{id: '002', name: '周冬雨', age: 24, sex: '女'},{id: '003', name: '周杰伦', age: 55, sex: '男'},{id: '004', name: '温兆伦', age: 12, sex: '男'}]},methods: {updateMei() {// this.personList[0] = {id: '001', name: '马保国', age: 50, sex: '男'} 不起作用this.personList.splice(0,1, {id: '001', name: '马保国', age: 50, sex: '男'})}}})
script>
body>
html>
3 总结Vue监视数据 Vue会监视data中所有层次的数据。如何监测对象中的数据？通过实现监视，且要在new Vue时就传入要监测的数据。
1）当对象中后追加的属性，Vue默认不做响应式处理，如果需要对此类属性做响应式处理，可以使用Vue.set()或this.$set()方法。对于数组中的数据，Vue通过包裹数组更新元素的方法实现数据监视。通过调用原生对应的方法对数组进行更新，并在此过程中重新解析模板、更新页面。
2）如需给后添加的属性做响应式，请使用如下API：
vm.set(target,propertyName/index,value) 或
vm.$set(target,propertyName/index,value)
如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：
1）调用原生对应的方法对数组进行更新。
2）重新解析模板，进而更新页面。在Vue修改数组中的某个元素一定要用如下方法：
（1）使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
（2）Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm的根数据对象【data() {}】添加属性！
特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm的根数据对象【data() {}】添加属性！
特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm的根数据对象【data() {}】添加属性！
