Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。 本文的结论对于性能的毁灭是针对列表子元素顺序被改变、或者子元素被删除的特殊情况，提前说明清楚。 那么它的 vnode 也就是虚拟 dom 节点大…

beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。 更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。 2.当我们需要在…

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

MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel…

能不移动，尽量不移动。不行就移动，实在不行就新建

使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉，它扮演着很重要的角色。由于小编接触Vue比较多，React只是浅学，所以本篇主要针对Vue来展开介绍，带你一步一步搞懂它。 虚拟DOM（Virtual Dom），也就是我们常说的虚拟节点，是用JS对象来模拟真…

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

微任务总是在宏任务执行前执行。所以，微任务更适合nextTick的场景。把nextTick回调中的脚本放到一个promise.then()中，就能保证是DOM更新后执行。 首先来了解一下JS的运行机制。 JS执行是单线程的，它是基于事件循环的。 所有同步任务都在主线程上执行，形…

前端三大框架 Angular、React、Vue ，它们的路由解决方案 angular/router、react-router、vue-router 都是基于前端路由原理进行封装实现的，因此将前端路由原理进行了解和掌握是很有必要的，因为我们再使用的过程中也难免会遇到一些坑，一旦…