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