vue2中的数据代理和数据劫持

vue2中的数据代理和数据劫持

学习vue2的时候在了解原理时，会遇到数据代理和数据劫持，搞明白来了这一点就可以知道为什么vue2中更改数据，页面可以跟着变

---

1. Object.DefineProperty实现数据代理

(1) 介绍和应用场景

• 涉及双向绑定的原理
• 作用：可以往一个对象中添加属性，根据传参的配置对象，可以让这个属性和普通对象属性有些不同
• 应用：当对象中的属性值来自对象外部的变量时，更改变量的值，对象中的值也想同步更改
  
  这样的age，如果outerAge改为20，对象中age还是19
• 如果想外部的改变可以同步到内部，就需要用到Object.DefineProperty

(2) 使用方法

• Object.defineProperty(对象,要添加得键,{配置对象})
• 配置对象的主要属性有：

  • value:18 //添加得属性得value

  • enumerable:true //是否可以被枚举 for in是否可以获取到 默认：false

  • writeable:true //value是否可以被修改 默认：false

  • configurable:true //是否可以被删除 默认：false

  • get(){} //当这个属性被获取的时候调用

  • set(){} //当这个属性被修改的时候调用

Object.defineProperty(对象,要添加得键,{配置对象})

let person={
	name:'szk'
}
Object.defineProperty(person,"age",{
	value:18 //添加得属性得value
	enumerable:true //是否可以被枚举 for in是否可以获取到 默认：false
	writeable:true //value是否可以被修改 默认：false
	configurable:true //是否可以被删除 默认：false

	get(){} //当这个属性被获取的时候调用
	set(){} //当这个属性被修改的时候调用
})

(3) 用这个使属性和外部数据绑定

• get set在调用的时候可以来同步内外数据
  

(4) 这样就实现了数据代理

• 修改代理的（调用setter），就可以修改到真正的，就是数据代理
  

2. data 和 _data

• 看vm可以看到有一个属性叫做_data,它和vue实例中的data是同一个东西，一毛一样
  

3. vue中的数据代理

• vue将_data中的所有数据属性通过Object.defineProperty添加到vm实例上，并且提供了getter和setter方法
• 于是通过vm直接获取数据的时候就调用getter，获取_data中的值，当修改的时候调用setter修改_data中的值
  
• 举个例子画个图
  

那数据代理有什么用呢？

• 既然vm上挂的属性就是_data中的数据代理，那么{{vm._data.name}}和{{name}}是等价的,{{vm_data.name='szk2'}}和{{name='szk2'}}也是等价的
• 所以就是为了写代码的方便，在{{}}直接写数据，或者直接修改就能操作到_data中

4. vue中的数据劫持

• 数据劫持就是将vue代码里我们写的data加工了一下，让每个属性有了getter和setter
• 这就可以实现数据变了，改变页面
• 先看看我们写的data和加工之后的data有什么区别
  
• 实际上vue通过监听者observer来监听data中的数据，这个getter和setter就是监听者里面的方法
• getter就是监听者获取data中数据的，setter则是监听当数据发生变化的时候执行操作的
• 当修改属性的时候，setter被调用，在setter方法中就会让订阅者执行重新解析模板的操作，从而改变了页面

5. 将两者结合总体流程

• 结合起来看，当数据改变时，页面也跟着改变就是这个流程
  

---