Zzh1110的博客

快速diff算法实测中性能最优。它借鉴了文本diff中的预处理思路，先处理新旧vnode中相同的前置和后置节点。处理完后如果无法简单地通过挂载新节点或者卸载已经不存在的节点来完成更新，则需要根据节点的索引关系，构造出一个最长递增子序列，里面所指向的节点即为不需要移动的节点。

这章介绍了双端Diff算法的原理和优势，简单来说主要通过新旧vnode的前后指针来判断，有四种命中情况，命中一种则不再进行判断。

在这一章中，我们讨论了Diff算法作用，主要是用来计算新旧vnode的差异，并尝试最大程度复用DOM元素。并解释了为什么需要Diff算法，以及DOM复用带来的好处，以及key的作用。并通过几个例子讲解了渲染器是如何移动、添加、删除vnode所对应的DOM元素的。

在前面，首先讨论了如何挂载子节点，以及节点的属性。节点的属性其实挺复杂的，涉及到的两个概念，HTML Attributes 和 DOM Properties是用来设置与之对应的的初始值的。该如何正确设置元素属性，取决于被设置属性的特点，以及对特殊属性class的处理。又该如何正确卸载，避免直接使用innerHTML来清空容器元素。还有vnode的类型，该如何区分，什么时候才有打补丁的必要。

正如前面所说，渲染器不仅能够把虚拟DOM渲染为浏览器平台上的真实DOM。通过渲染器设计可为配置的通用渲染器，即可实现渲染到任意目标平台上。本节将以浏览器作为渲染的目标平台，编写一个渲染器。在这个过程中，可以看到哪些内容是可以抽象的，然后通过抽象，将浏览器特定的API抽离，这样就可以使得渲染器的核心不依赖于浏览器。在此基础上，为那些被抽离的API提供可配置的接口，就可以实现渲染器的跨平台能力了。我们先从渲染一个普通的标签开始。}

前面讨论了非原始值的响应式实现，接下来这节将讨论原始值的响应式实现。原始值指的是：等类型的值。在JS中，原始值是按值传递的，而非按引用传递。这意味着如果一个函数接收原始值作为参数，那么形参和实参之间没有引用关系，它们是两个完全独立的值，对形参的修改不会影响实参。另外JS中的Proxy无法提供对原始值的修改，因此想要将原始值变成响应式数据，就需要做一层包裹，vue.js里面是借助ref实现的，接下来就让我们来认识它。由于Proxy的代理目标必须是非原始值，所以我们没有任何手段拦截对原始值的操作，例如：对于这

这章主要是介绍非原始值的响应式方案。Vue3的响应式数据是基于Proxy实现的，那么我们非常有必要了解Proxy和Refelct。参考资料：阮一峰的 官方参考资料简单来说，Proxy代理对象可以拦截我们对原对象的操作，即属性值的增删改查。Reflect反射对源对象的属性进行操作。可能这样说还是有点抽象，看个简单的例子理解下：前面我们实现的响应式代码，其实有一个问题，没有用Reflect.get和Reflect.set进行读取和设置：借助一个例子来分析一下，如果不借助Reflect来进行读取和设置，会出现

Vue2的响应式实现是借助 通过重写getter和setter方法来进行的数据劫持，Vue3通过Proxy代理拦截对象中任意属性的变化，通过Reflect反射对源对象的属性进行操作。上面中的这句话应该都知道，那我们先来了解一下什么是副作用函数，以及它有什么用？它和响应式数据又有什么关系？举例：当一个函数修改了全局变量。响应式数据：当值发生变化后，副作用函数会自动重新执行。那么怎么才能让数据变成响应式数据呢？上代码前请看两个地方：上图中Set数据结构所存储的副作用函数集合我们称为 key的依赖集合。

watch：当webpack发现有代码变换的时候，它会重新编译、重新打包。开始创建一个项目，肯定需要一个html网页，并且引入打包后的js文件。大体上是一样的，只不过vue3的api会不同，以及新建Vue实例那里。在src下创建router文件夹，并创建index.js文件。bundle.js还不存在，所以需要去安装开发依赖。“build” ： 上线的时候运行构建命令。具体的写法和vue的一样，这里就不贴出来了。在使用npm安装package之前，得先。src下放的是我们的源代码。