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