-
Vue Constructor
Vue构造函数要做的事情,实例化一个Vue实例,添加$el,$data,$options三个属性
建立观察者(Observer),处理模板编译部分(Compiler),将data中的所有属性与vue直接绑定
-
Observer
通过递归遍历,Object.defineProperty对data中的所有属性进行数据劫持
-
Compiler
模板编译部分,主要是通过node的attribute属性来匹配到相应的指令,将对应的node与数据绑定起来
-
Watcher
监听者,监听者主要做的工作是保存一个oldValue,如果数据发生了改变,匹配oldValue和newValue必然不相等,这时候进行node值的更新
实质上就是将数据与模板建立联系
-
Dep
依赖的收集,每次getter劫持的时候,将新的监听者添加到Dep数组中,每次setter劫持时,将Dep数组中的所有监听者执行回调,更新node的数据
Dep和Watcher的关系是,Watcher是对每次getter操作都进行监听 Dep包含一个Watcher数组 又有一个notify回调可以遍历执行所有的Watcher
-
Vue初始化实例的时候发生了什么?
将Vue构造函数实例化,添加属性$data,$el,$options,并先后执行 Observer(用来将data中所有的数据都进行数据劫持),Compiler(模板编译部分,将对应的node与数据绑定起来),最后又一次通过Object.defineProperty将Vue实例上的属性与data中的属性进行关联起来
-
Vue双向绑定的原理 v-model
两部分,一部分是如何实现数据更新视图跟着更新,一部分是如何实现视图更新数据跟着更新
1.实现数据更新视图跟着更新
数据getter时,在dep中添加watcher,数据setter时,执行dep的notify回调,遍历每一个watcher,执行函数(通过匹配旧值和新值,如果不相等,对应node的value进行更新)
2.实现视图更新数据跟着更新
Compiler会将有v-model的node添加一个input的事件监听,每次输入数据都会更新data中对应属性的值,而每次更新值又会触发setter劫持,进行dep的notify回调。
-
如何匹配到{{msg}}像这样双括号中的变量
第一,需要知道的是元素标签(elementnode)中的文本值,本身会被一个文本标签(textnode)所包裹住。
通过Compiler进行模板编译的时候,找到文本标签,用正则匹配来解析node.textContent,如果匹配到{{}},解析出{{}}中的变量,添加watcher,返回data中对应变量的value,当value更新时,又会触发setter劫持,将watcher执行,匹配新旧值,更新node.textContent