Vue源码01
2020-10-13 18:16:39 4 举报AI智能生成
vue源码初始化流程和响应式原理分析
作者其他创作
大纲/内容
初始化流程
入口文件：覆盖$mount<br>platforms/web/entry-runtime-with-compiler
web运行时代码：实现$mount<br>platforms/web/runtime/index
$mount
__patch__
全局api定义<br>core/index
core/global-api/index
set
delete
nextTick
...
Vue构造函数<br>core/instance/index
initMixin：实现_init()<br>core/instance/init.js
initLifecycle
initEvents
initRender
beforeCreate
initInjections
initState
initProvide
created
stateMixin
$data,$props,$set,$delete,$watch<br>
eventsMixin
$on,$emit,$once,$off
lifecycleMixin
_update,$forceUpdate,$destroy
renderMixin
$nextTick,_render
数据响应式
data的数据响应式<br>src/core/instance/state.js<br>
initState()<br>数据响应式起始
observe()<br>返回ob实例，ob对value做响应式
Observer<br>判断value类型，创建小秘书ob
walk()
defineReactive()<br>数据的访问拦截
observeArray()
Dep<br>依赖管理，变更通知
两种dep的作用
Watcher<br>和组件挂钩或者和用户定义的观察表达式挂钩，数据变更后执行更新
dep和watcher之间的映射规则
array.js<br>数组的特殊处理，覆盖能够改变数组的7个方法
0 条评论
下一页
