2403_88913721的博客

摘要：实现一个mini-vue3的核心机制 本文介绍了mini-vue3的核心实现，包括响应式系统、虚拟DOM和组件渲染机制。响应式系统通过Proxy拦截对象操作，结合依赖收集(Dep类)和触发机制，使用WeakMap建立三层映射结构高效管理依赖关系。渲染系统采用虚拟DOM优化性能，通过createApp创建应用实例，setup函数管理状态，render函数基于虚拟DOM描述视图结构。整个系统实现了数据变化时自动更新视图的效果，同时避免了频繁的DOM操作，为前端开发提供了高效的响应式编程体验。

Vue Router 原理与实现 前端路由实现SPA无刷新页面跳转，核心是URL与UI的映射。两种原生实现方式： hash模式：通过hashchange监听URL变化，不会引起页面刷新 history模式：利用pushState/replaceState和popstate事件 Vue3实现路由类需包含： 路由映射表 响应式当前路径 历史管理API 事件监听 关键组件： RouterLink：处理路由跳转 RouterView：动态渲染对应组件 实现要点： 通过Map存储路由配置 使用Vue响应式系统跟踪路径

Vue.js中watch有两个关键特性：立即执行的回调函数和回调函数的执行时机。首先，当immediate选项为true时，watch会在创建时立即执行一次回调函数。通过封装scheduler调度函数，可以在初始化和数据变更时执行回调。其次，flush选项用于指定调度函数的执行时机，当flush为'post'时，回调函数会被放入微任务队列，等待DOM更新后执行；否则，回调函数会同步执行。

这一次接触到了平时使用的watch属性，它的底层实现其实就是effect以及options.scheduler,为了更加通用watch 使用 traverse 函数递归遍历对象的所有属性。然后我们也实现了传入getter函数，主要是对source进行判断，函数就赋值给getter直接执行，参数就traverse 递归遍历，最后我们通过懒加载 effect 实现了新旧值的对比，确保回调函数能够获取到变化前后的值。

computed属性的实现我们首先用到了懒加载effect，需要使用的时候才使用。因为我们前面返回了effectFn作为effect函数的返回值，那我们就可以手动调用该副作用函数了。接着我们实现了computed属性，我们是传入一个getter函数和懒加载属性，为了解决多次访问会导致effectFn多次计算，我们需要缓存value。但是我们如果修改obj.foo的值，我们发现并没有响应的修改最后的sumRes，那是因为dirty并没有在修改值之后被修改为true，所以我们就要使用scheduler选项，在

今天一下子看了两小节的内容，首先是避免无限循环：在执行无限循环的时候track何trgger的副作用函数都是activeEffect，那么解决方法就是在trigger当中判断activeEffect和effect函数是否是相同的。然后我看了调度，其实vue当中控制调度是添加一个调度函数来实现的，传入一个调度函数，在track当中处理这个调度函数，trigger就执行调度方法。

在响应式编程中，effect函数用于注册副作用函数，当依赖的响应式数据发生变化时，副作用函数会自动执行。然而，当effect函数发生嵌套时，可能会出现副作用函数覆盖的问题。具体表现为，内层effect函数的执行会覆盖全局变量activeEffect，导致外层effect函数的依赖关系被错误地收集。 为了解决这个问题，引入了effect栈的概念。在副作用函数执行时，将其压入栈中，执行完毕后弹出，并始终让activeEffect指向栈顶的副作用函数。这样，每个响应式数据只会收集直接读取其值的副作用函数，避免了嵌

解决分支问题，主要是clearUp函数在副作用函数执行前清除旧的依赖关系，确保只有当前实际使用的属性变化时才触发更新，值得注意的是我们遍历effects集合，当副作用函数执行的时候会调用clearUp函数清除，实际上就是从effects集合中将当前执行的副作用函数剔除，但是副作用函数的执行又会导致其重新被收集到集合中，陷入死循环，我们要构造一个集合并遍历他

《Vue.js设计与实现》一书深入探讨了Vue3的响应式系统，重点介绍了如何通过Proxy实现数据的响应式更新。书中详细讲解了副作用函数和响应式数据的概念，并通过代码示例展示了如何拦截数据的读取和设置操作，以实现自动更新。具体实现包括使用Proxy拦截对象的读取和设置操作，并通过WeakMap和Set来管理副作用函数。书中还提供了封装函数的方法，如track和trigger，以简化代码结构。通过这些技术，开发者可以更好地理解Vue3的响应式原理，并应用于实际开发中。