Vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Obeject.defineProperty()来劫持各个属性的setter、getter。在数据变动时给订阅者发送消息,触发响应的监听回调。在Vue里面用了 Object.defineProperty 实现了data的 getter/setter 操作,通过 Watcher 来观察数据的变化,进而更新到视图中。
Object.defineProperty
通过此函数实现双向绑定,直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
-
语法:
Object.defineProperty(obj, prop, descriptor)
-
参数:
<1>obj:目标对象,要在其上定义属性的对象。
<2>prop:需要添加或者定义的属性名称。
<3>descriptor:属性描述符,目标属性值所拥有的特性 -
返回值:被传递给函数的对象。
-
属性描述符:
<1>数据描述符:具有值的属性,该值可能是可写的,也可能不是可写的。
拥有的可选键值:
configurable
:可配置的
表示对象的属性是否可以被删除,以及除writable特性外的其他特性是否可以被修改。默认为 false。
enumerable
: 可列举的
当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为 false。
value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
writable
当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 false。设置为false时,该属性被称为“不可写”,也就是不能改变它的值。<2>存取描述符:由getter-setter函数对描述的属性。
拥有的可选键值:
configurable
:可配置的
enumerable
: 可列举的
get
:
一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。默认为 undefined。
set
:
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。默认为 undefined。
注意点:描述符必须是这两种形式之一;不能同时是两者。
如果一个描述符不具有value,writable,get 和 set 任意一个关键字,那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字,将会产生一个异常。 -
例子:
var o = {}; // 创建一个新对象
// 在对象中添加一个属性与数据描述符的示例
Object.defineProperty(o, "a", {
value : 37,
writable : true,
enumerable : true,
configurable : true
});
// 对象o拥有了属性a,值为37
// 在对象中添加一个属性与存取描述符的示例
var bValue;
Object.defineProperty(o, "b", {
get : function(){
return bValue;
},
set : function(newValue){
bValue = newValue;
},
enumerable : true,
configurable : true
});
o.b = 38;
// 对象o拥有了属性b,值为38
// o.b的值现在总是与bValue相同,除非重新定义o.b
// 数据描述符和存取描述符不能混合使用,否则抛出错误
Object.defineProperty(o, "conflict", {
value: 0x9f91102,
get: function() {
return 0xdeadbeef;
}
});
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
发布者-订阅者
订阅者就是把要执行的函数和要的事件类型给消息存放的地方(Listener:调度中心),而发布者就是告诉消息存放的地方(Listener:调度中心)你现在可以执行这个事件类型对应的函数了,并且把我给你的数据也传进去。
执行过程
- 在 Vue 中模板编译过程中的指令或者数据绑定都会实例化一个 Watcher 实例,实例化过程中会触发 get() 将自身指向 Dep.target;
- data在 Observer 时执行 getter 会触发 dep.depend() 进行依赖收集;依赖收集的结果:
①data在 Observer 时闭包的dep实例的subs添加观察它的 Watcher 实例;
②Watcher 的deps中添加观察对象 Observer 时的闭包dep; - 当data中被 Observer 的某个对象值变化后,触发subs中观察它的watcher执行 update() 方法,最后实际上是调用watcher的回调函数cb,进而更新视图。
Observer类
Observer类是将每个目标对象(即data)的键值转换成getter/setter形式,用于进行依赖收集以及调度更新。
在getter时,dep会收集相关依赖,即收集依赖的watcher,然后在setter操作时候通过dep去通知watcher,此时watcher就执行变化
getter方法:
- 先为每个data声明一个 Dep 实例对象,被用于getter时执行dep.depend()进行收集相关的依赖;
- 根据Dep.target来判断是否收集依赖,还是普通取值。
setter方法:
- 获取新的值并且进行observe,保证数据响应式;
- 通过dep对象通知所有观察者去更新数据,从而达到响应式效果。
Watcher
Watcher是一个观察者对象。依赖收集以后Watcher对象会被保存在Dep的subs中,数据变动的时候Dep会通知Watcher实例,然后由Watcher实例回调cb进行视图的更新。
Dep
被Observer的data在触发 getter 时,Dep 就会收集依赖的 Watcher ,在data变动时,就会通过 Dep 给 Watcher 发通知进行更新。
例子
<template>
<div>
// 实例化一个watcher实例,也就是这里的message
<input v-model="message">
<span>{{ message }}</span>
</div>
</template>
<script>
export default {
// 触发observer类,为message键值转换成getter/setter形式,并且声明Dep实例对象
data () {
return {
message: '1'
}
}
}
</script>