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