Vue3源码分析

91 阅读1分钟

1、Vue实例初始化过程

Vue源码分析.png

整体调用栈

截屏2023-04-08 14.46.45.png

2、mount挂载流程

未命名文件.jpg

3、 更新机制

  • 调用栈信息

截屏2023-04-08 16.21.46.png

更新过程

  • setupRenderEffect建立更新机制
  • 组件数据发生变化执行更新机制
  • 内部调用dipatch

未命名文件.png

2、响应式原理

  • reactive函数的实现

reactive响应式原理.jpg

  • ref函数的实现

ref原理.jpg

  • computed函数的实现

computed函数原理.jpg

-watch函数的实现

watch函数原理.jpg

2、vue的设计思路

  • 声明式 数据驱动 渐进式