数据代理与数据劫持
说数据代理和数据劫持之前先来看Object.defineProperty这个方法的使用
Object.defineProperty（）参数有三个 第一个是 给哪个对象添加属性，添加的属性的名字 配置项
那么个方法和数据代理和数据劫持有什么关系呢？往下看
数据代理
Vue中的数据代理就是通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处就是更加方便的操作data中的数据
- 基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性
如果有人改data里面的数据 那么就通过setter修改 如果想查看data里面的数据 那么就 需要通过getter
一旦data中的数据改变，那么页面中用到此数据的就会自动更新
数据代理把_data中的数据放到了vm中一份 是利用 Object.defineProperty实现的
我们将data上的数据放置到vm._data身上，然后对vm._data进行数据代理，这样使得我们能直接使用vm来访问属性，方便操作。
数据劫持
数据劫持在我理解就是给data上面加getter和setter和监视，实现响应式和页面更新
在把data中的数据给vm身上的_data之前 加工了一下data数据 就实现了数据监视 加工之后就可以有响应式了
修改data里面的数据 之后调用setter setter中的一个调用引起重新解析模板 模板重新解析就会形成新的虚拟dom 形成新的虚拟dom之后就会新旧dom对比 之后更新页面
vue有一个Observer的构造函数（监视的构造函数）
在_data中做了数据劫持 ，让vue监测到数据改变 实现了响应式
- 数据劫持是实现响应式的关键。当我们把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。也就是我们常说的，当监测到data中数据的改变时，Vue会及时更新视图，将插值语法中的数据改变。（这段话引用自这个博主的关于数据代理和数据劫持
）
也就是说数据代理把data先放到vm._data中进行代理，这样可以直接通过vm访问属性，
数据劫持把数据变成响应式的也就是监测数据了数据的改变 同时立即更新视图
那么接下来看看是怎么监测的数据改变
Vue监测数据改变的原理
首先，vue会监视data中所有层次的数据
-
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据
对象中后追加的属性，Vue默认不做响应式处理
如需给后添加到属性做响应式，请使用如下API：
Vue.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()
3.替换数组：变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下也有非变更方法，例如filter(),concat()和slice()，它们不会变更原始数组，而总是返回一个新数组，当使用非变更方法时，可以用新数组替换旧数组 -
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性！！ -
注意：在vue中修改数组元素时候需要使用数组中push(),pop(),shift(),unshift(),splice(),sort(),reverse()的这七个方法，因为数组中的数据没有被setter和getter,而是vue将Array原型上的这七个方法包装起来了，包装之后就可以让数组数据改变之后还可以刷新页面，那么数组元素中使用push(),pop(),shift(),unshift(),splice(),sort(),reverse()这七个方法他们不是Array原型上的方法，而是vue包裹之后的方法 也就是说 是 !==Array.prototype.pop()这样的关系
第二种就是用Vue.set(哪个数组，数组索引，改成什么) -
数组中的对象是响应式的数组中添加对象也是响应式的 那么对象中的属性可以不用数组的方法改 就直接改
|
