新建vite 项目就不多说了 目录结构 button组件 index.js Input组件下的 index.js也是一样的 这里就不一 一截图了 有一个注意点： 组件文件需要提供name，否则打包会失

运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 对象为引用类型，当复用组件时，由于数据

Vue 中的 slot 和 slot-scope 一直是一个进阶的概念，对于我们的日常的组件开发中不常接触，但是却非常强大和灵活。 这使得这种模式的开发体验变的更为统一，本篇文章就基于 2.6.11 的最新代码来解析它的原理。 可以看到，我们只要把一个用来处理请求的异步 pro…

目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，一起来get吧。 先来了解几个点... 1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起…

详细讲述了 Vue 的 Hook Event 是什么，以及它的使用场景和实现原理 .........

在经过初始化阶段之后，即将开始组件的挂载，不过在挂载之前很有必要提一下虚拟Dom的概念。这个想必大家有所耳闻，我们知道vue@2.0开始引入了虚拟Dom，主要解决的问题是，大部分情况下可以降低使用JavaScript去操作跨线程的庞大Dom所需要的昂贵性能，让Dom操作的性能更…

之前的章节，我们按照流程介绍了vue的初始化、虚拟Dom生成、虚拟Dom转为真实Dom、深入理解响应式以及diff算法等这些核心概念，对它内部的实现做了分析，这些都是偏底层的原理。接下来我们将介绍日常开发中经常使用的API的原理，进一步丰富对vue的认识，它们主要包括以下： 这…

最近部门分享，有同学提到了 Vue 响应式原理，大家在讨论时，发现一些同学对这一知识理解还不够深入，不能形成一个闭环，为了帮助大家理解这个问题，我重新过了一下 Vue 源码，并整理了多张流程图，便于大家理解。 从 Vue 初始化，到首次渲染生成 DOM 的流程。 从 Vue 数…

直观来说，虚拟DOM其实就是用数据结构表示真实的DOM结构。使用它的原因是，频繁的操作DOM会使得网站的性能下降，为了保证性能，我们需要使得DOM的操作尽量精简，我们可以通过操作虚拟DOM的方法，去比较新旧节点的差异然后精确的获取最小的，最为必要的DOM集合，最终挂载到真实的D…