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