最终方案是，更改淘汰机制，将排序操作改为搜索操作，保证多开窗口在Vue中状态保持。

Vue 和 React 都是基于 vdom 的前端框架，组件渲染会返回 vdom，渲染器再把 vdom 通过增删改的 api 同步到 dom。

当再次渲染时，会产生新的 vdom，渲染器会对比两棵 vdom 树，对有差异的部分通过增删改的 api 更新到 dom。

这里对比两棵 vdom 树，找到有差异的部分的算法，就叫做 diff 算法。

diff 算法是渲染器中最复杂的部分，也是面试的热点问题。今天我们就通过 Vue 的 diff 算法来探究下 diff 算法吧。

讲解通过点击页面元素自动定位vscode代码行的实现原理，以及在vue项目中的具体接入方案。

Getting a Vue app to perform faster and smoother is one of the issues Vue.js software developers face. One way to do that is by offloading some heavy-duty work to another thread and allowing the main thread to handle the UI. But we can only do that with the help of web workers.

In this article, we will talk about web workers, how to offload a task to a web worker and how to optimize our web application by hooking a web worker into it and the app workflow.

介绍在Vue中3种页面级别前端灰度新功能的方案。

本期将用vue3与pixijs复刻出童年在小霸王里面玩的游戏-猎鸭季节，当初玩它需要光线枪才行，非常不好瞄准，每当打中鸭子就非常激动，打不中就会有收到狗子的嘲笑，想想那时候快乐真的很简单。现在，就想办改造了一下，让他不用光线枪用鼠标也能击中它，圆童年一个梦。

我们都知道，在每一次事件循环后浏览器会有一个UI的渲染过程，那么在一次事件循环内触发的所有dom操作都会被当作为异步任务被放进异步任务队列中等待被处理。

那么此例子只是更改了一次dom结构，如果更改100+次呢？

虽然浏览器做了优化，在一段时间内频繁触发的dom不会被立即执行，浏览器会积攒变动以最高60HZ的频率更新视图；但是难免还是会造成一定次数的重排。

这时候，虚拟dom就派上了用场：不管更改多少次，多少个地方的结构，都会映射到新的虚拟dom结构中去，然后进行diff的对比，最终渲染成真实的dom，在这一次render中只会操作一次真实的dom结构，所以只会造成一次重排。

同时，采用JS对象去模拟DOM结构的好处是，页面的更新完全可以映射到JS对象中去处理，而操作内存中的JS对象速度也会更快。

对于 SSR 服务端渲染这个概念稍有经验的开发应该都不陌生，官方文档 Vue SSR 指南 对于什么是服务端渲染、为什么使用服务端渲染以及什么时候使用服务端渲染已经说的很清楚了，结合一张经典的构建过程总结关于 SSR 的基本知识。

Vue.js 以其简单易用的特点而被广泛使用，本篇文章将会重点介绍在 Vue.js 应用中的一些 API 使用方法和使用场景，希望能给你带来一些帮助。

本文以一个点击 vue 页面元素跳转到对应 vscode 代码的 loader 和 plugin 开发实战，讲述 webpack loader 和 plugin 开发的简单入门。

通过本文，你可以对 webpack 的 loader 和 plugin 有一个更清晰的认知，以及如何开发一个 loader 和 plugin，同时也穿插了一些 vue、css、node 方面的一些相关知识，扩充你的知识面。

官方介绍就是： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是 activated 和 deactivated。

简单理解就是说我们可以把一些不常变动的组件或者需要缓存的组件用包裹起来，这样就会帮我们把组件保存在内存中，而不是直接的销毁，这样做可以保留组件的状态或避免多次重新渲染，以提高页面性能。

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

前端开发中，无论是 React 还是 Vue 框架，列表项都要使用唯一的 key，很多人会直接使用 index 作为 key，而并不知道 key 的原理。这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key。

1. vue文件是如何转换成DOM节点，并渲染到浏览器上的？
2. 数据更新时，整个的更新流程又是怎么样的？

关于 vue3，虽然之前很早就看过了，但是也只是简单的了解一番写了几个小 demo，而且我司的主要技术栈也是 vue, 近期趁着这股学习的劲，赶紧向上申请了一个内部项目，想着用 vue3 实践一波，希望这一篇总结对一些小伙伴提供一些帮助。

以下主要会从两部分去做总结,一部分是可能混淆的点 or 一些常见的问题，另外一部分是实践过程中遇到的坑点/注意点。

说到Diff，我们可能首先想到的就是Vue或者React中的一种更新算法，目的就是为了找出差异更新DOM树。而算法本质上是一类问题的最优解，Diff本身是差分、不同的意思，还有诸如字符串或者JSON的Diff，Linux系统中经典的文件Diff。这里我们要探讨的其实就是树的Diff,它的发展历程其实是经过了很长的一段时间。