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