源码解析——VUE

简介: 源码解析——VUE

Vue源码解析

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

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

image.png

image.png

image.png

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

image.png

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

节点VNode/patch更新流程:

patch->patchVNode->updataChildren

image.png

目录
相关文章
|
1天前
|
算法 Java Go
ArrayList源码解析
ArrayList源码解析
5 1
|
7天前
|
JavaScript 前端开发 算法
vue生命周期函数原理解析,vue阻止事件冒泡方法实现
vue生命周期函数原理解析,vue阻止事件冒泡方法实现
|
7天前
|
缓存 Java 开发者
10个点介绍SpringBoot3工作流程与核心组件源码解析
Spring Boot 是Java开发中100%会使用到的框架,开发者不仅要熟练使用,对其中的核心源码也要了解,正所谓知其然知其所以然,V 哥建议小伙伴们在学习的过程中,一定要去研读一下源码,这有助于你在开发中游刃有余。欢迎一起交流学习心得,一起成长。
|
10天前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
12天前
|
SQL 缓存 Java

推荐镜像

更多