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