vue源码流程图
2024-07-17 18:54:40 4 举报AI智能生成
vue2源码解析
作者其他创作
大纲/内容
数据响应式
运行时入口文件 src/platforms/web/entry-runtime-with-compiler.js扩展$mount，处理template或者el选项
src/platforms/web/runtime/index.js定义一个patch：最终将虚拟dom转成真实dom
运行时的核心文件： src/core/index.js1.初始化全局API：component/filter/directive/use/mixin/util/extend2.服务端渲染的一些功能3.指定Vue 版本号
选项合并$options
1:initLifecycle()//绑定$parent/$root/$children...
2:initEvents() //自定义事件监听
3:initRender() //创建render函数 $slots/$createElement/$listeners./$attrs..响应式
6.initState() //数据初始化 //props/methods/data/computed/watch
7.initProvide(vm) // resolve provide after data/props
初始化核心逻辑
扩展$mount，查找render方法没有找到则处理template或者el选项并挂载mount() 最终执行patch():将虚拟dom转换成真实domsrc/platforms/web/entry-runtime-with-compiler.js
当设置了el选项时，自动调用$mount()
initMixin()：实现_init初始化方法当设置了el选项时自动调用$mount方法src/core/instance/init.js
$data 组件data数据监听
$props 监听父组件的值
$set() 删除数据的监听
$delete() 删除数据的监听
$watch() 用户自定义监听属性
stateMixin(): 数据状态监听src/core/instance/state.js
$emit()：事件派发
$on()：事件监听
$off()：事件解除监听
$once()：事件只触发一次
eventsMixin(): 事件相关监听src/core/instance/state.js
_update 更新（内部使用的方法，将虚拟dom转换成真实dom）
$forceUpdate() 更新方法:数据改变不更新可以尝试使用
$destroy() 销毁方法
lifecycleMixin()：组件生命周期相关的方法src/core/instance/state.js
$nextTick()
_render()
renderMixin()：渲染相关的方法src/core/instance/state.js
构建Vue对象文件(vue 实例属性和方法)src/core/instance/index.js
vue源码流程图
收藏
收藏
0 条评论
回复 删除
下一页
