Vue源码解析
2022-07-06 11:32:18 18 举报AI智能生成
vue2.x源码脑图
作者其他创作
大纲/内容
初始化流程
入口文件
platforms/web/entry-runtime-with-compiler.js
platforms/web/entry-runtime-with-compiler.js
web运行时代码
platforms/web/runtime/index
platforms/web/runtime/index
实现$mount
mountComponent执行首次渲染、更新
core/instance/lifecycle.js
core/instance/lifecycle.js
Vue.prototype.__patch__ = inBrowser ? patch : noop
全局API定义
core/index
core/index
全局API实现
src\core\global-api\index.js
src\core\global-api\index.js
Vue构造函数定义
core/instance/index.js
core/instance/index.js
initMixin实现_init
core/instance/init.js
core/instance/init.js
initLifecycle
vm.$parent/$root/$refs/$children
initEvents
vm._events
updateComponentListeners(vm,listeners)
initRender
vm._c
vm.$createElement
beforeCreate
initInjections
resolveInject(vm.$options.inject, vm)
defineReactive(vm, key, result[key])
initState
initProps
initMethods
initData
initComputed
initWatch
initProvide
vm._provided
created
stateMixin定义$data,$props,$set,$delete,$watch
core/instance/state.js
core/instance/state.js
eventsMixin定义$on,$emit,$off,$once
core/instance/events.js
core/instance/events.js
lifecycleMixin定义_update,$forceUpdate,$destroy
src/core/instance/lifecycle.js
src/core/instance/lifecycle.js
renderMixin定义两个实例方法$nextTick和_render
src/core/instance/render.js
src/core/instance/render.js
数据响应式
observe()返回一个Observer实例
core/observer/index.js
core/observer/index.js
Observer对象根据数据类型执行对应的响应化操作
core/observer/index.js
core/observer/index.js
defineReactive定义对象属性的getter/setter
core/observer/index.js
core/observer/index.js
Dep管理一组Watcher，Dep关联的值更新时通知其管理的Watcher更新
core/observer/dep.js
core/observer/dep.js
Watcher监控一个表达式或关联一个组件更新函数，数值更新则指定回调或更新函数被调用
src\core\observer\watcher.js
src\core\observer\watcher.js
数组响应式
数组方法打补丁
core\observer\array.js
core\observer\array.js
覆盖数组原型
core\observer\index.js
core\observer\index.js
数组响应式的特殊处理
core\observer\index.js
core\observer\index.js
依赖收集时特殊处理
core\observer\index.js
core\observer\index.js
虚拟DOM
mountComponent
创建updateComponent
vm._render
vm._update
vm.__patch__
创建Watcher
createPatchFunction
nodeOpts
节点操作
节点操作
modules
属性更新
属性更新
patch
同层比较：增、删、改
patchVnode：属性更新、文本更新、子节点更新
编译器
作用
运行时 runtime
'<div></div>'
预编译
<template></template>
将template-》render
执行过程
解析parse
template -> ast
优化optimize
标记静态节点
生成generate
ast -> render function
重要内容
v-if
v-for
v-model
0 条评论
下一页
