诸葛村夫V

回顾下我们的案例，我们使用 reactive 创建了一个 state，之后该 state 的变化都会触发响应式的更新渲染。 调用 createReactiveObject 方法并返回创建的 state 代理对象。 isReadonly 用来区分是否为只读，Vue3 中可以使用 …

在第一篇文章中使用了下面这个 demo，其中用 setTimeout 模拟了一个更新，我们知道 Vue3 中使用 Proxy 代替了 Object.defineProperty 做响应拦截，在 Proxy setter 中会有一个 trigger 的触发，这个就是更新的入口。 …

上文提到 setupComponent 之后，会调用 setupRenderEffect 生成一个渲染的副作用方法。componentEffect 就是更新时会执行的方法，这里会执行组件的生命周期方法等，renderComponentRoot 会执行之前编译出来的 code 以…

mount 方法首先创建了 vnode，然后渲染 vnode，最后返回组件的代理对象。 这里选项是对象，所以 shapeFlag 为 4，_createVNode 中额外要提及的是 currentBlock 和 patchFlag，这两个跟新特性相关，后面的文章中会详细说明。 …

首先 ensureRenderer() 调用 createRenderer 方法创建了一个平台相关的渲染器，在本例中就是浏览器环境。参数 rendererOptions 包含了浏览器的一些 dom 操作方法，如 insert、 remove 等。渲染器主要包括两个方法 rend…

接手一个 Vue CLI 2.x 构建的历史项目，代码比较庞大，其中各项依赖都比较陈旧，希望升级为 Vue CLI 4.x 版本。官方并没有提供迁移方案，所以用 4.x 创建项目后修改对应的配置，然后将 src 复制到新目录下。 准备工作结束后，运行 npm run serve…

之前我们介绍过组件在挂载时执行 $mount 方法，实际执行的是 mountComponent 方法。在这个方法里创建了一个当前实例的渲染 Watcher 对象，第二个参数是 updateComponent 方法，如果该方法被调用会最终执行 _render 方法，_render…

可以直接提供祖辈上下文 this 依赖，后代注入后可以使用上下文中所有内容。 由于 setup 函数没有 this 上下文, 所以 provide 的内容你需要按需传入，传什么后代才能用什么。 $parnet 父实例，如果当前实例有的话。 已经移除了这个 $parent，需要使…

本系列将用七天时间，带你分析一波 Vue2 源码，基于 Vue 2.6.11 版本。文章内容基于个人学习总结，同时也大量借鉴了大佬们的资料，引用处均会注释说明并给出传送门。 水平一般，能力有限。如对源码理解有误，欢迎指正，万分感谢。 在根目录中找到 script/config.…