源码解析——VUE
发布日期:2021-06-30 15:09:51
浏览次数:3
分类:技术文章
本文共 633 字,大约阅读时间需要 2 分钟。
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节点更新
转载地址:https://jiangwenxin.blog.csdn.net/article/details/107028256 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
逛到本站,mark一下
[***.202.152.39]2024年04月20日 08时48分15秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
location区段
2019-04-30
nginx访问控制、基于用户认证、https配置
2019-04-30
linux内存的寻址方式
2019-04-30
how2heap-double free
2019-04-30
how2heap-fastbin_dup_consolidate
2019-04-30
tf keras SimpleRNN源码解析
2019-04-30
MyBatisPlus简单入门(SpringBoot)
2019-04-30
攻防世界web进阶区web2详解
2019-04-30
xss-labs详解(上)1-10
2019-04-30
xss-labs详解(下)11-20
2019-04-30
攻防世界web进阶区ics-04详解
2019-04-30
sql注入总结学习
2019-04-30
Python 之 histogram直方图
2019-04-30
Python实现决策树 Desision Tree & 可视化
2019-04-30
决策树 Decision tree
2019-04-30
nominal和ordinal & 数据处理中四种基本数据类型
2019-04-30
Trie树(字典树)
2019-04-30
MATLAB与CUDA
2019-04-30
Linux png转jpg (convert命令)
2019-04-30