Vue源码结构
2024-05-16 09:42:23 0 举报AI智能生成
Vue源码结构
作者其他创作
大纲/内容
初始化流程
入口文件，处理template/el，转换成render函数
\src\platforms\web\entry-runtime-with-compiler.js
\src\platforms\web\entry-runtime-with-compiler.js
compileToFunctions
\vue\src\compiler\to-function.js
\vue\src\compiler\to-function.js
检查cache缓存，如果存在直接返回
编译compile，生成ast和render字符串
将render字符串包装成render函数，createFunction
web运行时代码
\vue\src\platforms\web\runtime\index.js
\vue\src\platforms\web\runtime\index.js
实现$mount
mountComponent执行首次渲染、更新
\vue\src\core\instance\lifecycle.js
\vue\src\core\instance\lifecycle.js
Vue.prototype.__patch__ = inBrowser ? patch : noop
全局API定义
\vue\src\core\index.js
\vue\src\core\index.js
全局API实现
\vue\src\core\global-api\index.js
\vue\src\core\global-api\index.js
Vue.set(target, key, val)
\vue\src\core\observer\index.js
\vue\src\core\observer\index.js
Vue.del(target, key)
\vue\src\core\observer\index.js
\vue\src\core\observer\index.js
Vue构造函数定义
\vue\src\core\instance\index.js
\vue\src\core\instance\index.js
initMixin实现_init
\vue\src\core\instance\init.js
\vue\src\core\instance\init.js
initLifecycle
\vue\src\core\instance\lifecycle.js
\vue\src\core\instance\lifecycle.js
vm.$parent/$root/$children/$refs
initEvents
\vue\src\core\instance\events.js
\vue\src\core\instance\events.js
vm._events
updateComponentListeners(vm, listeners)
initRender
\vue\src\core\instance\render.js
\vue\src\core\instance\render.js
vm._c
vm.$createElement
callHook(vm, 'beforeCreate')
initInjections
\vue\src\core\instance\inject.js
\vue\src\core\instance\inject.js
resolveInject(vm.$options.inject, vm)
defineReactive(vm, key, result[key])
initState
\vue\src\core\instance\state.js
\vue\src\core\instance\state.js
initProps
initMethods
initData
initComputed
initWatch
initProvide
\vue\src\core\instance\inject.js
\vue\src\core\instance\inject.js
vm._provided
callHook(vm, 'created')
stateMixin
\vue\src\core\instance\state.js
\vue\src\core\instance\state.js
vm.$data拦截vm._data
vm.$props拦截vm._props
vm.$set
vm.$delete
vm.$watch
eventsMixin
\vue\src\core\instance\events.js
\vue\src\core\instance\events.js
vm.$on
vm.$once
vm.$off
vm.$emit
lifecycleMixin
\vue\src\core\instance\lifecycle.js
\vue\src\core\instance\lifecycle.js
vm._update
vm.$forceUpdate
vm.$destroy
renderMixin
\vue\src\core\instance\render.js
\vue\src\core\instance\render.js
vm.$nextTick
vm._render
数据响应式
observe 返回一个Observer实例
\vue\src\core\observer\index.js
\vue\src\core\observer\index.js
Observer对象根据数据类型执行对应的响应化操作
\vue\src\core\observer\index.js
\vue\src\core\observer\index.js
defineReactive定义对象属性的get/setter
\vue\src\core\observer\index.js
\vue\src\core\observer\index.js
Dep管理一组Watcher，Dep关联的值更新时通知其管理的Watcher更新
\vue\src\core\observer\dep.js
\vue\src\core\observer\dep.js
Watcher监控一个表达式或关联一个组件更新函数，数值更新则指定回调或更新函数被调用
\vue\src\core\observer\watcher.js
\vue\src\core\observer\watcher.js
数组响应式
\vue\src\core\observer\array.js
\vue\src\core\observer\array.js
数组方法打补丁push、pop、shift、unshift、splice、sort、reverse
覆盖数组原型
数组响应式的特殊处理
依赖收集的特殊处理
虚拟DOM
mountCoponent
创建updateComponent
vm._reder
vm._update
vm.__patch__
创建Watcher
createPatchFunction
nodeOpts节点操作
modules属性操作
patch
同层比较：增、删、改
patchVnode
属性更新、文本更新、子节点更新
编译器
createCompiler
\vue\src\compiler\index.js
\vue\src\compiler\index.js
解析
生成语法树AST
优化
标记静态节点（无需更新）
生成
根据AST生成render函数
v-for、v-if
\vue\src\compiler\parser\index.js
\vue\src\compiler\parser\index.js
processFor
genFor
\vue\src\compiler\codegen\index.js
\vue\src\compiler\codegen\index.js
processIf
genIf
\vue\src\compiler\codegen\index.js
\vue\src\compiler\codegen\index.js
生成三元表达式
v-model
在render函数中如下
domProps 赋值
on input 监听
入口compileToFunctions
\vue\src\platforms\web\entry-runtime-with-compiler.js
\vue\src\platforms\web\entry-runtime-with-compiler.js
vue-element-admin
https://github.com/PanJiaChen/vue-element-admin
0 条评论
下一页
为你推荐
查看更多
