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. 将两者结合总体流程
- 结合起来看,当数据改变时,页面也跟着改变就是这个流程