Vue监测数据的原理

数据劫持：

加工：就是把data中的每一组key-value都形成get  set的写法  （可以进行对对象里边属性的监视）

 

name一变化就会调用set，就会重新解析模板，所以页面数据也变了

 this是obs实例对象。24行代码就是往obs实例对象身上添加data中的属性

Vue监测数据的原理---对象：

响应式的给学生添加一个性别属性：

 Vue监测数据的原理---数组：

 数组：

hobby是数组，并没有为0,1,2服务的get set，所以通过下标修改数组中的数据，页面不会更新。

上图中，数据改变了，但是页面不变。

 只有调用了这些方法，Vue承认数组修改了，页面就会更新。

 上图中，数据改变了，页面也更新了。

总结：

Vue监视数据的原理：

                1. vue会监视data中所有层次（对象里边还是对象，一层套一层）的数据。

                2. 如何监测对象中的数据？

                                通过setter实现监视，且要在new Vue时就传入要监测的数据。

                                    (1).对象中后追加的属性，Vue默认不做响应式处理

                                    (2).如需给后添加的属性做响应式，请使用如下API：

                                                    Vue.set(target，propertyName/index，value) 或

                                                    vm.$set(target，propertyName/index，value)

                3. 如何监测数组中的数据？

                                    通过包裹数组更新元素的方法实现，本质就是做了两件事：

                                        (1).调用原生对应的方法对数组进行更新。

                                        (2).重新解析模板，进而更新页面。

                4.在Vue修改数组中的某个元素一定要用如下方法：

                            1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

                            2.Vue.set() 或 vm.$set()

如果是用 filter，就将过滤后的数据再赋值给这个数组。

               

                特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（vm._data 添加属性！！！

实例：

 对数据劫持的理解：

 如果有人改了student，就会被set劫持到（你站住，干啥去~~~），然后1.正常更新数据，2重新解析模板。

劫持 和代理  都离不开 object.defineproperty().