vue3
文章平均质量分 83
渐进式JavaScript 框架易学易用,性能出色,适用场景丰富的 Web 前端框架。基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档。
邹荣乐
拥有多年开发经验的前端工程师,曾经参与过多个大型项目的开发,积累了丰富的项目经验。希望能结交更多志同道合的朋友。
展开
-
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
处理大量数据的渲染对于前端开发来说是一项挑战,但也是提升网页性能和用户体验的重要环节。要有效解决这一问题,可以采用虚拟滚动(Virtual Scrolling)、分批渲染(Incremental Rendering)、使用Web Workers处理数据、利用前端分页(Pagination)、借助服务端渲染(SSR)来优化大量数据的处理。其中,虚拟滚动是一种非常有效的技术,它通过只渲染用户可见的列表项来极大减少DOM操作和提高性能。这种方式不仅提升了滚动的流畅度,也减轻了浏览器的负担,尤其适用于长列表数据的展原创 2024-07-01 09:12:06 · 1490 阅读 · 0 评论 -
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
在Vue.js的开发过程中,我们经常需要在客户端存储一些数据,以便在用户关闭页面或刷新后能够恢复之前的状态。Vue-ls插件就是一个为Vue.js设计的本地存储解决方案,它基于localStorage和sessionStorage,使得在Vue组件中存取数据变得异常简单。原创 2024-06-21 14:29:11 · 1912 阅读 · 0 评论 -
Vue 3 + Vite项目实战:常见问题与解决方案全解析
import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。每次手动打包还是很费劲的, vite 同样也有能把 ./dist 文件夹打包成 .zip 的插件,当然这个打包的文件夹不一定非得是 ./dist,可以是任何位置,只要指定好就可以了。这个 .zip 文件中的内容是不带 ./dist 这个外置文件夹的,直接就是 ./dist 里面的内容。也就是说,解压后,没有 dist 这一层文件夹,使用的时候要注意。原创 2024-06-19 08:44:24 · 1167 阅读 · 0 评论 -
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
权限控制是一个很重要的概念,在 Web 应用程序中尤其重要。简单地说,权限控制就是将用户分为不同的分类,为每个分类分配相应的用户权限。这样,用户就只能访问他们所允许的内容了。权限控制可以提高应用程序的安全性和稳定性,使数据更加安全可靠。在 Vue 中进行权限控制,通常有两种方式:第一种是在路由层面进行控制,第二种是在组件层面进行控制。原创 2024-03-09 10:31:17 · 5503 阅读 · 3 评论 -
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
通过给 type=index 的列传入 index 属性,可以自定义索引。该属性传入数字时,将作为索引的起始值。也可以传入一个方法,它提供当前行的行号(从 0 开始)作为参数,返回值将作为索引展示。methods: {原创 2024-06-17 08:45:43 · 2237 阅读 · 1 评论 -
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
钩子方法是一种软件设计模式,在该模式中,一个类定义了一个模板方法,其中一部分代码是固定的,另一部分代码可以由子类通过实现钩子方法来自定义。Vue的各生命周期,其实就是Vue开发者规定的一些hook,和git里面规定的hook类似,你只要往hook里面填自定义内容,它就可以执行。当特定的操作或事件完成后,回调函数会被调用并执行相应的代码逻辑。你用的是第三方的组件库,你需要在这个组件渲染或发生改变时候做一些操作,巧了这个组件还没有实现相应的回调,你怎么办呢,这个时候你就可以使用hook了!原创 2024-04-12 15:43:33 · 1619 阅读 · 1 评论 -
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。用来按条件显示一个元素的指令是 v-show。其用法基本一样:v-show 是通过控制display属性来进行dom的显示与隐藏v-if 是真正意义上的条件渲染,为true是渲染(dom存在),为false时不存在(dom不存在)原创 2024-03-09 10:31:32 · 1316 阅读 · 0 评论 -
Vue 3与Vue 2生命周期对比:新特性解析与差异探讨
Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这好像也没那么久,Vue3在2020年正式推出,在源码和API都有较大变化,性能得到了显著的提升,比Vue2.x快1.2~2倍。原创 2023-12-21 09:02:10 · 1025 阅读 · 0 评论 -
Vue3状态管理新选择:Pinia安装与使用详解,以及与Vuex的对比分析
Pinia 与 Vuex 一样,是作为 Vue 的“状态存储库”,用来实现 跨页面/组件 形式的数据状态共享。它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话,你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。当该数据、方法在很多地方都需要使用或需要通过页面保存的数据,如显示在导航栏中用户信息,一个多步骤表单页面等,这时我们就可以使用Store了。原创 2024-01-20 16:48:52 · 1097 阅读 · 0 评论 -
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
路由懒加载,也叫延迟加载或按需加载,是在需要的时候进行加载的一种技术。在单页面应用(SPA)中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也不利于用户体验。而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。原创 2023-12-06 10:56:26 · 3530 阅读 · 0 评论 -
深入剖析Vue中v-for的使用及index作为key的弊端
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法,其中 items 是源数据的数组,而 item 是迭代项的别名,v-for 也支持使用可选的第二个参数表示当前项的位置索引。原创 2023-11-17 16:05:51 · 728 阅读 · 0 评论 -
Vue.js项目中全面解析定义全局变量的常用方法与技巧
在Vue项目中我们需要使用许多的变量来维护数据的流向和状态,这些变量可以是本地变量、组件变量、父子组件变量等,但这些变量都是有局限性的。在一些场景中,可能需要在多个组件中共享某个变量,此时全局变量就派上了用场。原创 2023-11-03 14:12:14 · 15438 阅读 · 1 评论 -
使用vue3+vite+electron构建小项目介绍Electron进程间通信
使用了部分vue3的基本功能及方法,了解Electron的一下API的使用,开发中的常用的插件及依赖的使用方法。pinia+localStorage数据持久化unplugin-auto-import自动引入依赖unplugin-vue-components自动引入组件provide与inject组件间通信electron进程间相互通信element-plus构建UI界面。原创 2023-11-01 14:06:54 · 1447 阅读 · 0 评论 -
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
qiankun作为微前端的一种融合方式,目前也比较成熟,但是由于各类开发技术选型非常繁多,导致了在项目中配置不同,解决别人的问题,不一定能解决自己的问题。原创 2023-10-17 15:19:37 · 3275 阅读 · 2 评论 -
Vue路由传参实战指南:三种常用方法示例演示
params传参只能用 name,不能用 path。地址栏不显示参数名称 id,但是有参数的值。query传参name 和 path 都能用。用 path 的时候,提供的 path 值必须是相对于根路径的相对路径,而不是相对于父路由的相对路径,否则无法成功访问。地址栏显示参数格式为?id=0&code=1原创 2023-08-16 14:16:50 · 1028 阅读 · 0 评论 -
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加深度作用选择器 /deep/和>>>和::v-deep使用了外届的组件或者自己开发一个组件,修改一处就可能会影响到用这个组件的所有样式,所以就需要有一个方法或者方式,既不影响到别的地方,又能修改子组件在当前的样式。/deep/就能实现原创 2023-12-22 09:21:29 · 3363 阅读 · 0 评论 -
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
unplugin-vue-components插件可以在Vue文件中自动引入组件(包括项目自身的组件和各种组件库中的组件);使用此插件后,不需要手动编写import { Button } from 'ant-design-vue’这样的代码了,插件会自动识别template中使用的自定义组件并自动注册。原创 2024-02-19 11:22:30 · 7587 阅读 · 0 评论 -
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
template>--子组件eventsSetup.vue 定义事件演示-->//定义一个点击完成事件 done 和 sent 两个事件//TS模式 定义emits/*}>();*///触发done事件,请把用户输入的值msg传出去//也可以不传参数.itxst{原创 2024-06-18 09:00:43 · 6268 阅读 · 1 评论 -
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发者更高效地管理和维护样式表。以前用vue-cli的时候,还要安装sass-loader、node-sass什么的,安装的时候还会遇到各种问题,但是vite其实安装sass就可以了,很简单。Sass让CSS可以使用变量。可以用更少的代码,做更多的事,用更少的时间,具有更强的可读性。Sass提供了一个!原创 2024-02-22 14:09:05 · 6266 阅读 · 0 评论