本文只帮助于理解vue2.0怎么做到事件绑定、双向数据绑定、vue底层处理
vue是一个mvvm模式的渐进式框架
Vue与React、Angular的不同是，但它是渐进的
使用Angular，必须接受以下东西
1、必须使用它的模块机制
2、必须使用它的依赖注入
3、必须使用它的特殊形式定义组件
使用React，你必须理解
1、函数式编程的理念
2、需要知道它的副作用
3、什么是纯函数
4、如何隔离、避免副作用
MVVM初始化
在Vue初始化时会根据id获取dom对命令进行解析
1、根据dom获取对HTML进行解析
解析on命令,实现事件注册
将on指令进行切割去除
on:click中的click进行事件注册// 将on命令根据dom进行注册(node为dom) eventHandler: function(node, vm, exp, dir) { var eventType = dir.split(':')[1], fn = vm.$options.methods && vm.$options.methods[exp]; if (eventType && fn) { node.addEventListener(eventType, fn.bind(vm), false); } },
解析v-model
将v-model命令注册进入input监听中
node.addEventListener('input', function(e) { var newValue = e.target.value; if (val === newValue) { return; } me._setVMVal(vm, exp, newValue); val = newValue; });如何做到input监听与html中input相互绑定呢???
当数据发生改变时会将新数据塞入dom中
在初始化时做了什么操作呢?
在vue初始化时会将dom,options,一起传入
options : {data,methods,...}
第一步:
将options函数中的数据注入defineProperty进行get,set,同时将data对象中注入计算
///me : this
Object.defineProperty(me, key, {
configurable: false,
enumerable: true,
get: function proxyGetter() {
return me._data[key];
},
set: function proxySetter(newVal) {
me._data[key] = newVal;
}
});
计算属性的实现
获取到options中的key,在Object.defineProperty进行get返回即可
第二步:
将options传入监听者Observer进行Object.defineProperty监听,并同时初始化订阅者Dep,当数据发生变化时会通知订阅者
第三步:
将dom中传入命令解析器中对命令进行解析,详情看[根据dom获取对HTML进行解析]
监听者职责
将数据放入Object.defineProperty中,并添加进入订阅者集合,
当数据发生变化时,会通知订阅者进行处理
订阅者职责
当监听者通知订阅者时,订阅者将数据产生变化传递给观察者
然后根据订阅者集合中数据进行数据更新
监听属性怎么来的呢
在mvvm初始化时同步将options传入了观察者,当数据通知到观察者是,就会进行数据更新,进而达到了数据监听的目的
watch
下面看下mvvm解释图
