框架与类库:Vue
拥抱下一代前端工具链-Vue老项目迁移Vite探索
随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换项目启动,等待的时间就会显得尤为的漫长。无法忍受这种开发效率的我,决定将老项目迁移至vite。
距离Vite工具发布到现在已经有了一些日子了,工具链与生态已经趋于稳定,最新版本已经更新到了3.0,既然念头已起,心动不如行动。
无缝切换?从Vue到React
本文主要分析Vue和React在开发上的区别,帮助Vue开发者快速上手React,同时也适用于前端新手入门React。
Vue Router原理介绍
本文介绍了单页web应用的两种路由实现模式,以及如何在server端实现history模式的支持。
由浅入深读透vue源码:diff算法
腾讯工程师讲解并覆写针对数组变化的diff算法。
vue + svg 构建地图系统心路历程
通过vue+svg自研室内地图系统,将职场物资可视化管理,线上分析资源使用率、物资健康状态、BU的分布架构及人员变化,提高职场资源管理效率。
Vue2、Vue3的diff对比
diff 算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历。diff 算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时。
如何打造一套Vue组件库
组件库能帮我们节省开发精力,无需所有东西都从头开始去做,通过一个个小组件拼接起来,就得到了我们想要的最终页面。在日常开发中如果没有特定的一些业务需求,使用组件库进行开发无疑是更便捷高效,而且质量也相对更高的方案。
目前的开源组件库有很多,不管是react还是vue的体系里都有很多非常优秀的组件库,比如我经常使用的就有elementui和iview。当然也还有其他的一些组件库,他们的本质其实都是为了节省重复造基础组件这一轮子的过程。也有的公司可能会对自己公司的产品有特别的需求,不太愿意使用开源的组件库的样式,或者自己有一些公司内部的业务项目需要用到,但开源项目无法满足的组件需要沉淀下来的时候,自建一套组件库就成为了一个作为业务驱动所需要的项目。
深入了解 vue-cli
转转内部脚手架的 Webpack 部分,是基于 @vue/cli 进行二次封装的。
Iframe在Vue中的状态保持技术
最终方案是,更改淘汰机制,将排序操作改为搜索操作,保证多开窗口在Vue中状态保持。
聊聊 Vue 的双端 diff 算法
Vue 和 React 都是基于 vdom 的前端框架,组件渲染会返回 vdom,渲染器再把 vdom 通过增删改的 api 同步到 dom。
当再次渲染时,会产生新的 vdom,渲染器会对比两棵 vdom 树,对有差异的部分通过增删改的 api 更新到 dom。
这里对比两棵 vdom 树,找到有差异的部分的算法,就叫做 diff 算法。
diff 算法是渲染器中最复杂的部分,也是面试的热点问题。今天我们就通过 Vue 的 diff 算法来探究下 diff 算法吧。
如何在 Vue 项目中,通过点击 DOM 自动定位VSCode中的代码行?
讲解通过点击页面元素自动定位vscode代码行的实现原理,以及在vue项目中的具体接入方案。
Optimizing the Performance of Your Vue Apps Using Web Workers
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灰度发布新功能的那些事
介绍在Vue中3种页面级别前端灰度新功能的方案。
用vue3+pixijs复刻童年记忆里的游戏-猎鸭季节
本期将用vue3与pixijs复刻出童年在小霸王里面玩的游戏-猎鸭季节,当初玩它需要光线枪才行,非常不好瞄准,每当打中鸭子就非常激动,打不中就会有收到狗子的嘲笑,想想那时候快乐真的很简单。现在,就想办改造了一下,让他不用光线枪用鼠标也能击中它,圆童年一个梦。
图解Diff算法——Vue篇
我们都知道,在每一次事件循环后浏览器会有一个UI的渲染过程,那么在一次事件循环内触发的所有dom操作都会被当作为异步任务被放进异步任务队列中等待被处理。
那么此例子只是更改了一次dom结构,如果更改100+次呢?
虽然浏览器做了优化,在一段时间内频繁触发的dom不会被立即执行,浏览器会积攒变动以最高60HZ的频率更新视图;但是难免还是会造成一定次数的重排。
这时候,虚拟dom就派上了用场:不管更改多少次,多少个地方的结构,都会映射到新的虚拟dom结构中去,然后进行diff的对比,最终渲染成真实的dom,在这一次render中只会操作一次真实的dom结构,所以只会造成一次重排。
同时,采用JS对象去模拟DOM结构的好处是,页面的更新完全可以映射到JS对象中去处理,而操作内存中的JS对象速度也会更快。
聊一聊 Vue-SSR 激活失败(Vue hydration fails)
对于 SSR 服务端渲染这个概念稍有经验的开发应该都不陌生,官方文档 Vue SSR 指南 对于什么是服务端渲染、为什么使用服务端渲染以及什么时候使用服务端渲染已经说的很清楚了,结合一张经典的构建过程总结关于 SSR 的基本知识。