先来看一下我们需要实现的效果是怎样的: 这里我们没有使用原生的 js 方法去实现, 而是使用的 Vue3 官方推荐的一个工具库 @vueuse/cor 中的 useMouseInElement 方法来实现放大镜的效果首先来看一下 useMouseInElement 这个方法的返回值有哪些, 会使用到哪些? 我们会使用到 elementX, elem
转载
2024-05-15 05:52:15
65阅读
一. 对路由组件进行懒加载：
如果使用同步的方式加载组件，在首屏加载时会对网络资源加载加载比较多，资源比较大，加载速度比较慢。所以设置路由懒加载，按需加载会加速首屏渲染。在没有对路由进行懒加载时，在Chrome里devtool查阅可以看到首屏网络资源加载情况（6requests 3.8MB transfferred Finish:4.67s DOMContentLoaded 2.6
转载
2024-03-01 11:29:15
205阅读
Vue官方文档异步组件：在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了让事情更简单， Vue.js 允许将组件定义为一个工厂函数，动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。原图文来自h tt p // www .cnb logs. com/ Kumm y/p/525 47
原创
2017-06-21 10:09:15
1101阅读
Vue Hooks Plus是一个基于 Vue 3 Composition API 构建的高质量、可复用 Hooks 库，旨在封装常见业务逻辑与交互场景，帮助开发者减少重复代码、提升开发效率，同时保证代码的可维护性与扩展性。它不仅覆盖了基础工具类 Hooks，还提供了大量针对 UI 交互、异步处理、生命周期增强等场景的解决方案，是 Vue 3 生态中极具实用性的辅助库。
一、核心特点
全面的场景
(文章目录)
一、key 的作用
作为一个DOM节点的标识值，结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)
只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。
二、key 使用 id 与 index 的区别
不推荐使用index作为key，因为这种做法会导致某些节
原创
精选
2023-07-07 08:40:11
246阅读
点赞
1评论
(文章目录)
一、key 的作用
作为一个DOM节点的标识值，结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)
只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。
二、key 使用 id 与 index 的区别
不推荐使用index作为key，因为这种做法会导致某些节
原创
2023-08-14 08:51:34
130阅读
点赞
1评论
此文已由作者张汉锐授权网易云社区发布。 欢迎访问网易云社区，了解更多网易技术产品运营经验。 前言：对于我们而言，typescript 更像一个工具 官方指南 从 vue2.5 之后，vue 对 ts 有更好的支持。根据官方文档，vue 结合 typescript ，有两种书写方式： Vue.exte
转载
2018-11-05 10:53:00
164阅读
动画在现代 Web 应用中扮演着重要角色，它不仅能够提升视觉效果，还能改善用户体验。Vue 3 的强大生态和灵活的 API 为开发者提供了诸多实现动画的方式。在本文中，我们将深入探讨如何在 Vue 3 中实现和妙用动画效果，并通过具体代码示例，帮助你轻松掌握 Vue 动画的应用技巧。
Vue 3.0 Beta，重写虚拟DOM，速度显著提升
转载
2021-07-12 14:18:30
192阅读
一、概述 我们应该都知道 vue会通过 object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 vue
转载
2020-11-13 16:24:00
314阅读
此文已由作者张汉锐授权网易云社区发布。 欢迎访问网易云社区，了解更多网易技术产品运营经验。 vuex-class 提供了和 vuex 相关的全部装饰器，从而解决了上面 Vue.extend + vuex 的 「代码提示」「代码重构」两个问题，然后再通过手动添加类型声明，使得「类型检查」的工作也能生效
转载
2018-11-05 11:18:00
63阅读
说明：如果你在使用 vue-cli 提供的模板来构建你的应用，那么webpack的相关配置已经提供好了，这些配置已经经过很好地优化了编译过程。说明的是：Vendor fileCommon Chunks插件能把你的Vendor代码（例如Vue.js这些不会经常改动的依赖包）和应用代码（每次开发过程中都会改动的代码）分离开。你能配置插件检查一个依赖是否来自于node_modules，如果是，那就打包到
转载
2018-05-21 15:35:00
37阅读
2评论
(文章目录)
前言
俗话说，没有产品思维的码农不是一个好的程序猿。前端项目开发一段时间之后，除了必要的业务功能必须实现之外，就要开始考虑给开发系统增加一些附加价值，提升用户体验可以说是最大的附加价值。当然，从一开始开发项目就将客户体验置于优先考虑点是最好的选择。
1 尽量使用单列而不是多列布局
单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列则会有分散用户注意力的风险，使你的主
原创
2023-06-14 08:42:40
226阅读
点赞
1评论
前言
做前端也有一段时间了，对于实现各种需求来说已经是游刃有余了，代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。
用户体验说起来是一个比较模糊的概念，但是又是实实在在地决定着用户用起来爽不爽。最近写了很多中后台系统，很多人都认为这种中后台系统没什么技术含量（使用现成的UI框架写写表单，table做一做增删改查），我想说的是任何产品如果想做好，都必须重视用户体检。
另一个劣势是大部
原创
2023-06-15 08:44:59
119阅读
点赞
1评论
Vue.js 是一个功能强大的前端框架，能够帮助开发者快速构建交互式用户界面。而在 Vue 中，样式（style）的使用不仅仅是美化页面的工具，更是控制组件、提高性能和开发效率的关键部分。本文将深入探讨 Vue 中 style 的一些常见用法和技巧，帮助你提升项目的可维护性和可扩展性。
download:Vue实战商业级读书WebAPP全面提升技能运用Vue最新技术开发一个可商用、各项功能完备、媲美原生App的Web阅读应用。在开发中，将各种知识点穿插应用，让你真实感受到一个明星产品开发的全过程，项目对阅读器有着较为深入的研究，对各种复杂功能有从原理到实现的详细教学。同时，项目提供一流的用户体验和交互水准，在实现功能之外带你探究各种优秀前端交互的设计和实现适合人群适合有一定前端开
原创
2021-03-17 13:05:50
569阅读
(文章目录)
一、前言
前端项目开发一段时间后，会思考如何提升用户体验，如何布局前端页面，如何合理搭配页面色彩。本篇博文主要讲解如何通过色彩合理搭配提升用户体验。
二、基础理论
2.1 色彩搭配原则
色彩怎么搭配都可以，看你是想要对比效果还是要统一效果。
如果要对比效果，就取两种色相相差很大，或者明度相差很大，或者饱和度相差很大的颜色。
如果要统一效果，就用相差不远的色彩进行配色。
一般设计的时候
原创
2023-09-17 09:48:27
155阅读
点赞
1评论
Vue.js 作为前端开发的主流框架，其灵活性和性能优化能力一直是开发者关注的焦点。本文整理了 10 个实用技巧，涵盖 Vue 3 新特性、性能优化、代码规范等方向，帮助你写出更高效、更优雅的代码。1. watchEffect 的副作用清理大师：onInvalidate在 Vue 3 中，watchEffect 提供了一个强大的副作用清理功能——onInvalidate。它能在数据不再依赖或组件销
Vue.js 作为前端开发的主流框架，其灵活性和性能优化能力一直是开发者关注的焦点。本文整理了 10 个实用技巧，涵盖 Vue 3 新特性、性能优化、代码规范等方向，帮助你写出更高效、更优雅的代码。1. watchEffect 的副作用清理大师：onInvalidate在 Vue 3 中，watchEffect 提供了一个强大的副作用清理功能——onInvalidate。它能在数据不再依赖或组件销
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。可以看个例子： 差点忘记介绍了：我是一名08年出道的高级前端老鸟，大家如果想跟我交流学习经验，可以进我的扣扣裙 519293536 有问题我都会尽力帮大家。主要是中高级问
转载
2021-05-10 20:52:02
765阅读
2评论
