zoukankan      html  css  js  c++  java
  • 实现一个最小版本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渲染视图
  • 相关阅读:
    NKOJ P3051浇花
    Linux-Shell脚本编程-学习-2-Linux基本命令
    Linux-Shell脚本编程-学习-1-Linux基本命令
    Ubuntu下使用Git_6
    Ubuntu下使用Git_5
    电脑优化,提速
    Ubuntu下使用Git_4
    Ubuntu下使用Git_3
    Ubuntu下使用Git_2
    Ubuntu下使用Git_1
  • 原文地址:https://www.cnblogs.com/Evo1uti0n/p/13267843.html
Copyright © 2011-2022 走看看