一、 首先比较一下新旧节点是不是同一个节点（可通过比较sel（选择器）和key（唯一标识）值是不是相同），不是同一个节点则进行暴力删除（注：先以旧节点为基准插入新节点，然后再删除旧节点）。 新节点有子节点，这个时候就要仔细考虑一下了:若老节点没有子元素，则直接清空老节点，将新节…

key很重要，key是这个节点的唯一标识，告诉diff算法，在更改前后它们是同一节点； 只有是同一虚拟节点，才会进行精细化比较，否则就会暴力拆除旧的，插入新的。 那么问题来了，什么才叫同一虚拟节点，答

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

前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。 但是对项目里的webp…

作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方团队维护的 vue-resource，获得了 Vue 作者尤小右的大力推荐，成为了 Vue 项目中 HTTP 库的最佳选择。 虽然，axios 是个优秀的 HTTP 库，但是，直接在项目中使用并不是那么方便，所…

install方法的作用是将store这个实例挂载到所有的组件上，注意是同一个store实例。 Store这个类拥有commit，dispatch这些方法，Store类里将用户传入的state包装成data，作为new Vue的参数，从而实现了state 值的响应式。 现在我们…

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

目标：通过面试题来让自己的知识面更加广，更加深入。 key会用在虚拟DOM算法（diff算法）中，用来辨别新旧节点。 不带key的时候会最大限度减少元素的变动，尽可能用相同元素。（就地复用） 带key的时候，会基于相同的key来进行排列。（相同的复用） 上面这么4点就是官方文档…

vue3的出现就是为了解决vue2的弊端，composition API很好的解决了逻辑复用的问题，而且vue3源码就是用ts写的，对ts的支持非常好。我们在开发项目过程中可以使用ts的加持，使代码更