源码解析——VUE

Vue源码解析

vue使用Object.defineProperty+观察者模式对数据和模板进行绑定,对于数据来说需要进行更新时,即会触发对应的getter和setter函数,在setter函数中,即可根据对应收集到的依赖,触发对应视图层更新。

对于一次收集和一次更新来说,大致流程如下:

在这里插入图片描述

  • 实例化vue之后,对内部所有的data进行劫持
  • 处理对模板的编译/或者静态编译好的render函数,在处理绑定的变量时,创建watcher
  • 同时获取当前模块对应的初始值,在读取触发数据局的getter函数,进行绑定
  • 绑定成功后,后续触发setter,根据记录的watcher,即可更新所有的模块内容

当然对于模块的编译来说,有运行时编译、静态编译多种形式,同时对于vue来说,vue@2使用了VNode来对模块内容进行了描述,所以在模块编译的流程中,使用VNode能更好的提升编译和更新的性能。

  • 编译模块 Compiler
  • 数据处理 Observer
  • 依赖收集 Watcher/Dep
  • 节点VNode/patch更新

对于通用性的理解来说,vue@2和vue@1并没有太多区别,更多的核心在于VNode部分,也就是把编译模块的部分使用了VNode进行描述,编译为了函数形式,以及增加了patch的过程来保证更新。
节点VNode/patch更新流程:
patch->patchVNode->updataChildren

  • 单独更新一个VNode节点
  • 判断children节点更新

猜你喜欢

转载自blog.csdn.net/ZiChen_Jiang/article/details/107028256