原理分析
1. new Vue() ⾸先执⾏初始化,对data执⾏响应化处理,这个过程发⽣在Observer中
2. 同时对模板执⾏编译,找到其中动态绑定的数据,从data中获取并初始化视图,这个过程发⽣在Compile中
3. 同时定义⼀个更新函数和Watcher,将来对应数据变化时Watcher会调⽤更新函数
4. 由于data的某个key在⼀个视图中可能出现多次,所以每个key都需要⼀个管家Dep来管理多个Watcher
5. 将来data中数据⼀旦发⽣变化,会⾸先找到对应的Dep,通知所有Watcher执⾏更新函数
涉及类型介绍:
Observer:执⾏数据响应化(分辨数据是对象还是数组)
Compile:编译模板,初始化视图,收集依赖(更新函数、watcher创建)
Watcher:执⾏更新函数(更新dom)
Dep:管理多个Watcher,批量更新
代码如下:
1、第一步创建一个kvue类,相当于用户使用时new kvue。有四部操作,保存数据,添加响应式数据,data代理到vue实例上,最后编译初始化模板。
2、添加响应式数据,第二步创建一个Observer类,这个类用来判断数据是对象还是数组,同时对vue实例里面的的data数据添加响应式数据。
3、将数据代理到data上,这一步操作是为了,实现用户使用时,直接可以this访问到vue实例data里面的数据,否则,需要this.$data进行访问。
4、创建Compile类,对进行编译。
一些判断函数
update函数是重点,敲黑板!!!
update函数做了两件事,第一件事就是初始化绑定的数据。第二件事就是创建watcher,并且把更新函数放到watchaer里。下面是watcher类。
5、创建dep类,这个类在初始化添加依赖的时候就给每一个数据创建一个dep,当数据set()方法出发时,dep会通知watcher进行更新数据。dep类见下图,dep的调用见2-2.
最后附上代码地址:https://github.com/caohelen/vue-responseTheory