Vue是一个典型的MVVM框架,模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新。这种设计让状态管理变得非常简单而直观。那么Vue是如何把模型和视图建立起关联的呢?
实现原理
<div id="mvvm-app">
<input type="text" v-model="word">
<p>{{word}}</p>
<button v-on:click="sayHi">change model</button> //点击这个button,word的值会发生改变
</div>
<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
var vm = new MVVM({
el: '#mvvm-app',
data: {
word: 'Hello World!'
},
methods: {
sayHi: function() {
this.word = 'Hi, everybody!';
}
}
});
</script>
Vue实现这种数据双向绑定的效果,需要三大模块
- Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
- Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
- Watcher:作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
Observer(观察者)
Observer的核心是通过Obeject.defineProperty()
来监听数据的变动,这个函数内部可以定义setter
和getter
,每当数据发生变化,就会触发setter
。这时候Observer
就要通知订阅者
Object.defineProperty()定义新属性或修改原来的属性
Object.defineProperty(obj,prop,descriptor)
obj:必需。目标对象
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性
返回值:传入函数的对象,即第一个参数obj
给对象的属性添加特性描述,目前提供两种形式:数据描述和存取器描述。
var obj={
test:"hello"
}
数据描述
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
configurable:true|false,
enmuerable:true|false,
value:任意类型的值,
writable:true|false
});
//对象新添加的属性的特性描述
Object.defineProperty(obj,"newKey",{
configurable:true|false,
enmuerable:true|false,
value:任意类型的值,
writable:true|false
})
存取器描述
var obj = {};
Object.defineProperty(obj,"newKey",{
get:function (){} | undefined,
set:function (value){} | undefined
configurable: true | false
enumerable: true | false
});
注意:使用了getter或setter方法,不允许使用writable和value这两个属性
getter/setter
当设置或获取对象某个属性的值的时候可以提供getter/setter
getter是一种获得属性值的方法
setter是一种设置属性值的方法
var obj={};
var initValue='hello';
Object.defineProperty(obj,"newKey",{
get:function(){
return initValue;//当获取值的时候触发的函数
},
set:function(value){
//当设置的时候触发的函数,设置的新值通过参数value拿到
initValue=value;
}
})
//设置值
obj.newKey = 'change value';
console.log( obj.newKey ); //change value
注意:get或set不是必须成对出现,任写其一就可以。如果不设置方法,则get和set的默认值为undefined
Watcher(订阅者)
Watcher
订阅者作为Observer
和Compile
之间通信的桥梁,主要做的事情是:
- 在自身实例化时往属性订阅器(dep)里面添加自己
- 自身必须有一个
update()
方法 - 待属性变动
dep.notice()
通知时,能调用自身的update()方法,并触发Compile
中绑定的回调
Compile
Compile
主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。