vue源码简析

201 阅读1分钟
入口文件 src/platforms/web/entry-runtime-with-compiler.js
web运行时代码 platforms/web/runtime/index
	实现$mount
		mountComponent执行首次渲染、更新 core/instance/lifecycle.js
	Vue.prototype.__patch__ = inBrowser ? patch : noop
全局API定义 core/index
	全局API实现 src/core/global-api/index.js
Vue构造函数定义 core/instance/index.js
	initMixin实现_init 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
	eventsMixin定义$on,$emit,$off,$once core/instance/events.js
	lifecycleMixin定义_update,$forceUpdate,$destroy src/core/instance/lifecycle.js
	renderMixin定义两个实例方法$nextTick和_render src/core/instance/render.js
数据响应式 core/observer
	observe返回一个Observer实例 core/observer/index.js
	Observer对象根据数据类型执行对应的响应化操作 core/observer/index.js
	defineReactive定义对象属性的getter/setter core/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