一一

响应式系统总结Vue2响应式原理采用的是defineProperty,而vue3选用的是Proxy+Reflect来实现的数据代理。这两者前者只能劫持对象的属性修改对象属性的权限标签,后者是代理整个对象并区分浅层代理。性能上proxy会更加优秀。且Object.defineProperty对新增属性需要手动进行Observe。vue2.x版本使用了Object.defineProperty来实现双向绑定,根据具体的key去读取和修改。其中的setter方法来实现数据劫持的,getter实现数据的修改

baseHandlers实现源码在packsages/reactivity/baseHandlers.ts在 basehandlers 中包含了四种 handlermutableHandlers 可变处理readonlyHandlers 只读处理shallowReactiveHandlers 浅观察处理（只观察目标对象的第一层属性）shallowReadonlyHandlers 浅观察 && 只读处理其中 readonlyHandlers shallowReactive

effecteffect 作为 reactive 的核心，主要负责收集依赖,更新依赖,其会在 mountComponent、doWatch、reactive、computed 时被调用。实质:其实就是一个改良版的发布订阅模式。get 时通过 track 收集依赖，而 set 时通过 trigger 触发了依赖，而 effect 收集了这些依赖并进行追踪，在响应后去触发相应的依赖。effect 也正是 Vue3 响应式的核心。参数fn 回调函数options 参数执行在调用 effec

computed实现源码在packsages/reactivity/computed.ts使用传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象 const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 错误！或者传入一个拥有 get 和 set 函数的对象

reactive实现源码在packsages/reactivity/reactive.ts目录结构── src ├── baseHandlers.ts // 基本类型的处理器 ├── collectionHandlers.ts // Set Map WeakSet WeckMap的处理器 ├── computed.ts // 计算属性，同Vue2 ├── effect.ts // reactive 核心，处理依赖收集，依赖更新 ├── ind

ref实现源码在packsages/reactivity/ref.ts接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。ref 跟 reactive 都是响应系统的核心方法，作为整个系统的入口可以将 ref 看成 reactive 的一个变形版本reactive 内部采用 Proxy 来实现，而 Proxy 只接受对象作为入参，这才有了 ref 来解决值类型的数据响应，如果传入 ref 的是一个对象，内部也会调用 reactive

Mount源码位于packages/runtime-core/src/apiCreateApp.ts mount( rootContainer: HostElement, isHydrate?: boolean, isSVG?: boolean ): any { // 若还未渲染 if (!isMounted) { //调用createVNode获取vnode,rootCompon

工具函数源码位于shared/src/index.tsEMPTY_OBJ 空对象// Object.freeze是冻结对象,开发环境返回被冻结的空对象export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__ ? Object.freeze({}) : {}EMPTY_ARR 空数组export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []NOO

CreateApp重点在于 ensureRenderer // rendererProps来自于两部分组成： // nodeProps,查看runtime-dom/patchProps.ts,集合了原生dom方法，处理dom // patchProps,查看runtime-dom/patchProps.ts,处理元素属性等。 const rendererOptions = extend({ patchProp }, nodeOps) functi

源码（Vue3.2）目录结构├── .circleci // CI 配置目录├── .ls-lint.yml // 文件命名规范├── .prettierrc // 代码格式化 prettier 的配置文件├── CHANGELOG.md // 更新日志├── LICENSE├── README.md├── api-extractor.json // TypeScript 的API提取和分析工具├── jest.config.js // 测试框架 jest 的配置文件├── n