话题框架与类库 › Vue

框架与类库:Vue

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 的基本知识。

你必学的Vue.js的进阶教程

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

webpack loader 与plugin 开发实战 —— 点击 vue 页面元素跳转到对应的 vscode 代码

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

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

Home - Wiki
Copyright © 2011-2024 iteam. Current version is 2.125.1. UTC+08:00, 2024-05-17 13:14
浙ICP备14020137号-1 $Map of visitor$