vue3源码解析

1.vue2和vue3的对比。

1.由于vue3本来就是用typescript写的，所以vue3对typescript的支持度更高。在vue2上所有的属性都放在this里，难以实现数据类型的推导。
2.在vue2上大量的api都挂载到vue的对象原型上，难以实现TreeShaking。
TreeShaking：在web的性能优化中，es6 推出了tree shaking机制，tree shaking就是当我们在项目中引入其他模块时，他会自动将我们用不到的代码，或者永远不会执行的代码摇掉，在Uglify阶段查出，不打包到bundle中。
3.在架构层面对跨平台dom渲染开发支持不太友好。
4.受到ReactHoot的启发，使用CompositionAPI。
在vue中我们有两种API，一种是选项式(Option API) ，一种是组合式(composition)，其中选项式主要用于vue2，组合式主要用于vue3。 组合式API的特点：所有与特定功能相关地代码可以写到一块，代码比较集中； 选项式的特点：写代码的位置已经约定好，结构清晰但是。代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读，同一功能的上下文代码难找。
5.对于虚拟DOM进行重写、对模板的编译进行了优化操作（具体有下文提到）。
6.vue3使用monorepo对文件进行集中管理，文件结构类似于下图，使用rollur对项目进行并行打包。
详情：https://github.com/vuejs

2.响应式api的使用

1.reactive:使复杂的数据类型变为响应式。

//基本使用
const data = reactive({
	name:'张三',
	age:'20',
	son:[
		{name:'张四'},
		{name:'张五'}
		]
})

2.shallowReactive:只会对第一层进行代理。

const data = shallowReactive({
	name:'张三',
	age:'20',
	son:[
		{name:'张四'},	 //这里的name将不会被代理
		{name:'张五'}
		]
})

3.readonly :将对象设置为只读。

const data = readonly({ // 整个对象都是只读的
	name:'张三',
	age:'20',
	son:[
		{name:'张四'},	 
		{name:'张五'}
		]
})

4.shallowReadonly :同理只会对第一层只读。
5.isProxy;isReactive;isReadonly 等用于检测是否是相对应的响应式对象。

3.响应式api的实现

使用高阶函数柯里化，将多个功能使用同一个函数去实现。

export function reactive(target) { 
	return createReactobj(target,false,reactiveHandlers) //高阶函数
}
export function shallowReactive(target) { 
	return createReactobj(target,false,shallowReactiveHandlers)
}
export function readonly(target) {
	return createReactobj(target,true,readonlyHandlers)
}
export function shallowReadonly(target) {
	return createReactobj(target,true,shallowReadonlyHandlers)
}


function createReactobj(target,isReadonly,baseHandlers){
//具体实现功能的函数

}

proxy实现get

//target为被代理的目标对象
new proxy(target,{
	get(){
	},
	set(){
	}
})