信我！7张图带你读懂 vue3 中的 diff算法，包括前序比对、后序比对、同序列比对以及乱序比对，学不会你来打我！👊👊👊

上篇文章分析了mergeOptions函数的主要逻辑，最后知道是分别遍历俩个选项对象都去执行mergeField函数，其中mergeField函数其实是根据不同的key值来获取到相应的合并策略，从而执行真正的合并。接下来我们主要分析下Vue针对不同的内部选项实施的合并策略 我们…

我们再来看看infer。 在extends语句中，还支持infer关键字，可以推断一个类型变量，高效的对类型进行模式匹配。但是，这个类型变量只能在true的分支中使用。 不知道初学ts的朋友们看完这个介绍是不是一脸懵逼，反正之前我是... 建议自己捋一遍。 ts提供的exten…

Vue3如火如荼，与其干等，不如花一个下午茶的时间来看下最新的响应式数据是如何实现的吧。在本文中，会写到vue3的依赖收集和proxy数据代理，以及副作用(effect)是如何进行工作的。

但是很快我们又蒙圈了，这个组件实例和我们以前熟悉的this不一样，直接访问this.foo还是找不到数据。 当然坑还是有的，你仔细观察这个ctx，发现它不是一个Proxy对象，也就是这位兄台只有值却没有响应性，所以如果要利用响应特性，还得用proxy这个属性返回上下文对象，如果…

如果，你已经很熟悉vue框架，那么可以看看我对双向绑定的实现方式，如果你有更好的方式，非常欢迎分享出来。 如果，你不熟悉vue，则可以完整的看一遍，对于之后使用vue多少会有点帮助。 在分析它之前，我们可以先回答一个问题：为什么需要双向绑定呢？让我们把时间移到十年前，来看看前端…

因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。 文章的原地址：https://github.com/answershuto/learnVue。 在学习过程中，为Vue加上了中文的注释http…

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

使用 Vue 做项目也有两年时间了，对 Vue 的 api也用的比较得心应手了，虽然对 Vue 的一些实现原理也耳有所闻，例如 虚拟DOM、flow、数据驱动、路由原理等等，但是自己并没有特意去探究这些原理的基础以及 Vue 源码是如何利用这些原理进行框架实现的，所以利用空闲时…