2022年11月7日
Vue3源码解读之patch
摘要： 例子代码 本篇将要讲解dom diff，那么咱们结合下面的例子来进行讲解，这个例子是在上一篇文章的基础上，加了一个数据变更，也就是list的值发生了改变。html中增加了一个按钮change，通过点击change按钮来调用change函数，来改变list的值。例子位于源代码/packages/vue 阅读全文
posted @ 2022-11-07 15:00 yyzzabc123 阅读(71) 评论(0) 推荐(0)
Vue源码解读之InitState
摘要： 前面我们讲到了_init函数的执行流程，简单回顾下： 初始化生命周期-initLifecycle 初始化事件-initEvents 初始化渲染函数-initRender 调用钩子函数-beforeCreate 初始化依赖注入-initInjections 初始化状态信息-initState 初始化依 阅读全文
posted @ 2022-11-07 14:59 yyzzabc123 阅读(55) 评论(0) 推荐(0)
vue源码中的nextTick是怎样实现的
摘要： 一、Vue.nextTick 内部逻辑 在执行 initGlobalAPI(Vue) 初始化 Vue 全局 API 中，这么定义 Vue.nextTick。 function initGlobalAPI(Vue) { //... Vue.nextTick = nextTick; } 可以看出是直接把 阅读全文
posted @ 2022-11-07 14:58 yyzzabc123 阅读(45) 评论(0) 推荐(0)
2022年11月4日
上帝视角看Vue源码整体架构+相关源码问答
摘要： 前言 这段时间利用课余时间夹杂了很多很多事把 Vue2 源码学习了一遍，但很多都是跟着视频大概过了一遍，也都画了自己的思维导图。但还是对详情的感念模糊不清，故这段时间对源码进行了总结梳理。 本篇文章更合适于已看过 Vue2 源码，进一步总结加深概念的人群。若还未读过源码或零碎一知半解的小伙伴，也可以 阅读全文
posted @ 2022-11-04 10:32 yyzzabc123 阅读(57) 评论(0) 推荐(0)
如何正确学习vue3.0源码
摘要： 为什么要学源码 技术是第一生产力 学习 API 的设计目的、思路、取舍 学习优秀的代码风格 学习组织代码的方式 学习实现方法的技巧 学习 ES67 新 API、TS 高级用法 不给自己设限，不要让你周围人的技术上限成为你的上限 面试加分项 装逼利器 学习源码副作用 画虎不成反类犬（强行上马 vue3 阅读全文
posted @ 2022-11-04 10:31 yyzzabc123 阅读(88) 评论(0) 推荐(0)
2022年11月2日
vue源码分析-挂载流程和模板编译
摘要： 前面几节我们从new Vue创建实例开始，介绍了创建实例时执行初始化流程中的重要两步，配置选项的资源合并,以及响应式系统的核心思想，数据代理。在合并章节，我们对Vue丰富的选项合并策略有了基本的认知，在数据代理章节我们又对代理拦截的意义和使用场景有了深入的认识。按照Vue源码的设计思路，初始化过程还 阅读全文
posted @ 2022-11-02 09:22 yyzzabc123 阅读(74) 评论(0) 推荐(0)
vue源码分析-插槽原理
摘要： Vue组件的另一个重要概念是插槽，它允许你以一种不同于严格的父子关系的方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用的出口。这一节将围绕官网对插槽内容的介绍思路，按照普通插槽，具名插槽，再到作用域插槽的思路，逐步深入内在的实现原理,有对插槽使用不熟悉的，可以先参考官网对插槽的介绍。 阅读全文
posted @ 2022-11-02 09:21 yyzzabc123 阅读(158) 评论(0) 推荐(1)
vue源码分析-渲染过程
摘要： 继上一节内容，我们将Vue复杂的挂载流程通过图解流程，代码分析的方式简单梳理了一遍，最后也讲到了模板编译的大致流程。然而在挂载的核心处，我们并没有分析模板编译后渲染函数是如何转换为可视化DOM节点的。因此这一章节，我们将重新回到Vue实例挂载的最后一个环节：渲染DOM节点。在渲染真实DOM的过程中， 阅读全文
posted @ 2022-11-02 09:21 yyzzabc123 阅读(58) 评论(0) 推荐(0)
2022年11月1日
vue源码分析-响应式系统(二)
摘要： 为了深入介绍响应式系统的内部实现原理，我们花了一整节的篇幅介绍了数据(包括data, computed,props)如何初始化成为响应式对象的过程。有了响应式数据对象的知识，上一节的后半部分我们还在保留源码结构的基础上构建了一个以data为数据的响应式系统，而这一节，我们继续深入响应式系统内部构建的 阅读全文
posted @ 2022-11-01 12:31 yyzzabc123 阅读(23) 评论(0) 推荐(0)
vue源码分析-响应式系统工作原理
摘要： 上一章，我们讲到了Vue初始化做的一些操作，那么我们这一章来讲一个Vue核心概念响应式系统。 我们先来看一下官方对深入响应式系统的解释: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性。 并使用 Object.defineProper 阅读全文
posted @ 2022-11-01 12:30 yyzzabc123 阅读(30) 评论(0) 推荐(0)