vue 全家桶合集

Vue 是前端三大主流框架（Angular、React、Vue）之一，本合集主要介绍了 vue 核心部分原理知识，包括 vue 组件通信方式、虚拟 DOM、vue 的响应式原理、diff 算法、vue 生命周期、vue 编码优化手段、vue3 效率提升包含哪些方面以及 vue3 中最复杂的 API——Reactivity。了解底层原理是每一位开发者的必修课，俗话说“知其然知其所以然”。希望本合集能给大家带来帮助，哪怕一点点，我也会很开心😊

Vue组件通信方式总结

作者：法医

简介：这篇文章主要是为了应对面试的，面试过程中基本都有问到 vue 组件通信方式有哪些？本文通过父子组件通信以及跨组件通信两大方面介绍了 vue 中组件如何进行通信。

大道看“虚实”，DOM的虚实并进

作者：法医

简介：虚拟 DOM，我相信很多人或多或少听过它，虚拟 DOM 其实是随着 web 发展的产物，早期页面的交互效果没那么复杂，所以不会频繁操作 DOM，随着时代的发展，页面功能越来越复杂，DOM 的操作也越来越频繁，而 DOM 的操作进而会导致浏览器重新计算页面的几何变化、引发浏览器模板引擎的重排重绘，进而更加消耗性能。虚拟 DOM 作为 Vue 的核心，所以我们有必要了解一下。

一文带你了解 vue 之响应式原理

作者：法医

简介：本文介绍了 vue 的响应式原理，响应式就是当对象本身（对象的增删值）或者对象属性（重新赋值）发生变化时，会运行一些函数。那问题来了，我们怎么知道什么时候发生了变化呢？有两种方式可以检测到变化的：Object.definProperty 和 ES6 的 Proxy，文章从 vue 4 大核心部件（包括：Observer、Dep、Watcher、Scheduler）详细说明每个部件所发挥的作用。

请阐述vue的diff算法

作者：法医

简介：diff 算法是虚拟 DOM 中最核心的部分，有的时候也叫patch算法，通过 diff 算法可以将 vnode 渲染成真实的 DOM，通过它渲染真实 DOM 时，并不是覆盖原先的 DOM，而是对比新旧 vnode 之间的不同，然后根据对比结果找到需要更新的节点进行更新，以便达到减少操作 DOM 的目的，从而显著提升性能。要想知道 diff 算法到底做了什么不可告人的秘密，真相只有一个，你想要的这都有，请戳链接

道可道，非常道：vue生命周期的智慧之光

作者：法医

简介：“道”是万事万物由生及灭循环往复的规律。“道”不可用言辞来描述，“道”无处不在而又无行无踪。因为世间万物无时无刻不在发展变化，所以“道”看起来才如此捉摸不定。Vue 也需遵循由生及灭的规律，但不同的是，我能用言辞来描述😂，每个 vue 实例创建之初，都需经历一系列的初始化操作，同时也会运行生命周期的钩子函数，这给不同人生阶段的大展宏图带来了机会，我将带领各位一起探索 vue 实例被创建时经历了什么。

你不知道的computed

作者：法医

简介：很多时候面试官出了一个问题，他并没有期待你回答出多么深入的答案，可能按部就班地回答就 ok 了，但是如果你能回答出更深入的答案，有可能会把他吓到，所以本文旨达到惊艳面试官的目的，关于 computed 和 methods 区别，从浅显的回答过渡到更接近底层原理的回答。

vue 编码之优化手段

作者：法医

简介：性能优化本身就是一个很大的话题，并且它没有一个定式，最好是在具体的项目中具体分析，而不是说看到一个优化技巧一定要用在项目当中，这篇文章主要聊聊在 vue 编码阶段有哪些常见的优化手段。

vue3 效率提升主要表现在哪些方面？

作者：法医

简介：vue3 已经发布有段时间了，相较 vue2.0 确实上了一个台阶，据说在客户端渲染效率比 vue2 提升了1.3~2倍，SSR 渲染效率比 vue2 提升了2 ~3倍。本文主要谈谈 vue3 效率的提升主要表现在哪些方面

vue3 真香 Api——Reactivity

作者：法医

简介：Reactivity 可以说是 vue3 中最复杂的一个地方，当然也是功能最强大的一个点，听起来是块硬骨头哈🍖，这是因为 vue3 把数据响应式这些 API 暴露出来了，而 vue3 并没有这么做，本文主要聊聊 vue3 是如何响应变化的