实现一个最小版本vue(六)之总结

  1. 创建Vue实例对象,记录传入的选项,并注入到Vue实例当中
  2. 创建observer
    1. observer数据劫持,通过Object.defineProperty把data中属性中添加getter和setter,每个属性都还会创建一个dep对象,而此时getter和setter不会执行。
    2. 创建dep对象时,会创建一个subs数组,用来存储所有观察者,就是后面要说的watcher
  3. 创建compiler
    1. 解析指令,解析差值表达式。
    2. 页面首次加载,会分别判断是文本节点还是元素节点,做不同处理后,渲染视图。
    3. 渲染视图前,会触发observer里的getter方法,getter方法里会判断Dep里是否有target属性,现在还没有这个属性。
    4. 所有依赖数据的地方,都会实例化watcher,当数据变化,都会再更新这块数据
    5. 实例化watcher时,会把watcher本身记录到刚才说到的,Dep的target属性中。
    6. 存储初始化的值,而存储的时候,会触发observer的getter方法,在getter里,会调用dep的addSubs,把watcher存到subs数组中。
    7. 实例化watcher时,还要传入回调函数,为后续更新视图做准备。
  4. 更新视图
    1. 触发observer里的setter方法,setter里调用dep的notify通知,遍历watcher调用watcher里的update方法
    2. 这个方法先判断前后两个值是否发生了变化,如果发生变化,就会执行实例化时,传入的回调函数,进行修改视图
  5. 页面首次加载,通过compiler渲染视图,数据变化时通过watcher渲染视图
posted @ 2020-07-08 16:47  Evo1uti0n  阅读(175)  评论(0)    收藏  举报