Vue2.0计算属性的实现

说一下整体思路:

​ 在初始化的时候会给每一个计算属性都创建一个相对于的wathcer对象,然后这个watcher对象在创建的时候都会传入三个参数,第一个是vm实例对象,第二个就是在外面封装好的一个函数,这个函数主要是用于拿值,就是自己在外面写的return里面的值.第三个是一个对象,{lazy:true},这个lazy用于控制当前是否为计算属性,watcher内部逻辑使用了一个三元运算法,将计算属性的wathcer和渲染dom对应的watcher进行了区别,如果是渲染dom的watcher那么就会立即执行get方法,如果是计算属性,只会将内部方法申明,然后将返回的对象push()到一个对象里面.由key<-->value形式存在,key就是计算属性明value就是对应的watcher.后续,等渲染dom的wathcer走到了_s()方法来取值的时候,如果有计算属性被应用到,那么就会从储存计算属性的对象里面将这个对象拿出来,然后进行一个取值的操作,最后将取出来的值放在当前watcher对象的value上面,然后将当前watcher里面的dirty值也就是一个变量,用来控制多次重复取值的一个变量,改为false,这样下次如果再去这个值,直接将watcher.value返回给他就可以了.然后呢,在这个中间有一个非常重要的步骤,就是再取值的时候,会调用计算属性的get方法,这个get方法里面有一个evaluate方法,这个方法会调用get,在执行get的时候回向watcher队列中推入对当前的watcher,等对这个watcher的操作习性完毕之后就会将当前watcher推出队列,然后在判断,当前任然在渲染dom的逻辑里面,所以队列中还有一个watcher,这里判断的就是队列中是否还剩下watcher,如果剩下的话那么一定就是渲染dom的watcher,这里由于这个逻辑还在计算属性get逻辑里面,所以这里可以拿到计算属性的watcher对象里面的dep对象们,只需要将这些dep和队列中剩下的dep建立起联系就可以了.让他们一个一个的去调用depend()方法.这样就算完成了计算属性.当计算属性依赖的任何一个值发生改变的时候,都会调用notify方法,notify方法会调用每一个有关系的watcher的update方法,然后页面就能够实现响应式了.注意,watcher推送的方式为push,所以后进去的后执行,notify的时候会先将dirty值改回去,然后渲染watcher再拿值,最终实现页面响应式