vue是当下前端比较火的框架,中文地址:vue中文文档
翻看源码:
在其工程目录src下发现如下文件夹:
1
2
3
4
5
61. /compiler 目录是编译模板;
2. /core 目录是vue.js的核心
3. /planforms 目录是针对核心模块的‘平台’模块 (web weex)
4. /server 目录是处理服务端渲染;
5. /sfc 目录是处理单文件.vue;
6. /shared 目录是提供全局用到的工具函数
vue.js的组成是有core + 对应的‘平台’补充代码构成(独立构建和运行时构建只是platforms下web平台的两种选择)
vue的双向数据绑定
双向绑定(响应式原理)所涉及到的技术1
2
3
4
51. Object.defineProperty
2. Observer
3. Watcher
4. Dep
5. Directive
1. Object.defineProperty
var obj = {};
var a;
Object.defineProperty(obj,'a',{
get: function(){
console.log('get val');
return a;
},
set: function(newVal){
console.log('set val:' + newVal);
a = newVal;
}
});
obj.a // get val;
obj.a = '111'; // set val:111
双向数据绑定
2. Observer
观察者模式是软件设计模式的一种。
在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知。
这通常透过呼叫各观察者所提供的 方法来实现。此种模式通常被用来实时事件处理系统。
订阅者模式涉及三个对象:发布者、主题对象、订阅者,三个对象间的是一对多的关系, 每当主题对象状态发生改变时,其相关依赖对象都会得到通知,并被自动更新。
例如:
vue里边怎么操作的呢?
3. watcher
4. Dep
5. Directive
疑问一 vue哪来的?
function Vue(options) {
this.data = options.data;
var data = this.data;
observe(data, this);
var id = options.el;
var dom = new Compile(document.getElementById(id), this);
// 编译完成后,将dom返回到app中
document.getElementById(id).appendChild(dom);
}
是通过上述方法实例化的一个对象;但是里边有两个未知生物 observe ? Compile?
observer.js
1 | <!--定义 observe方法 --> |
有oberver方法,就是初始观察者,去遍历它自身的属性,然后defineReactive(定义一些反应)(key + value + vm),然后给vm设置key的value(即set和get方法); Dep()???
Dep.js
1 | function Dep() { |
明白了,在观察者看来,我需要有人订阅我的消息,添加一个dep对象(主题对象);然后我给它添加订阅,然后我作为消息的发出者给订阅者发消息;
compile
1 | function Compile(node, vm) { |
编译,就是创建节点,然后根据节点类型,然后去进行赋值操作, watcher???
watch.js
1 | function Watcher(vm, node, name, type) { |
就是订阅者模式中的订阅者了,接收四个参数,vm(实例),node(节点),name(属性key), type(节点类型了);做三个操作,get(获取值),update(值),cb(保持原值); Batcher????
Batcher.js
1 | /** |
这里边就是批量处理的函数了,事件队列的相关知识了,执行三个操作
- reset(批处理重置)
- push( 将事件添加到队列中)
- flush(执行并清空事件队列) ;
现在我们回过头去看整个事件,串起来就是vue的实现机制了….
源码看:github地址
未完待续……