friend_ship的博客

摘要：ElementUI的el-form组件在单搜索框场景下存在回车键自动提交表单的问题，这是由于HTML默认行为导致的。当表单仅含一个单行文本输入框时，回车键会触发表单提交而非预期操作。解决方法是在el-form标签中添加@submit.prevent修饰符，阻止默认提交行为。该问题常见于搜索筛选和弹窗新增字段场景，通过简单修改即可解决交互异常问题。（149字）

Vue3中Vue Router的path和name区别：path是URL路径（如"/user/list"），用于匹配地址栏；name是路由唯一标识（如"userList"）。主要区别在于：1)path需完整路径跳转，name通过名称引用；2)path仅支持query传参，name支持params和query；3)name在嵌套路由中更具优势。path适合简单静态路由，name适合复杂动态路由。建议优先使用name+params方式跳转，便于维护和解耦，路径变化时不影响

本文介绍了位运算在前端权限管理中的高效应用。通过定义基于2的幂次方的权限枚举，利用位运算的与、或、异或等操作实现权限的添加、移除和验证。在Vue3框架中，结合Pinia进行全局权限状态管理，并实现了自定义指令和组件来控制元素权限。这种方案具有高性能、低内存占用和良好扩展性，一个32位整数可表示32种权限状态，适合复杂的细粒度权限控制场景。

本文介绍了如何实现Element Plus消息框的两种样式定制：1.通过dangerouslyUseHTMLString属性允许使用HTML标签为文本添加红色样式；2.通过confirmButtonClass属性设置确认按钮的红色背景，可使用Element自带类或自定义样式（注意自定义样式需去除scoped限制）。文末展示了实现效果图，包含红色文本和红色按钮的确认对话框。

虚拟滚动技术原理与实现 虚拟滚动是一种优化长列表性能的技术，其核心思想是只渲染当前可视区域内的内容，而非一次性加载所有数据。当用户滚动时，动态移除不可见元素并加载即将显示的内容。这种方式可显著降低内存和CPU消耗，使万级列表也能流畅滚动。 在Vue3中可通过vue-virtual-scroller库实现： 固定高度列表：设置item-size指定统一高度，性能最优 上拉加载列表：结合分页加载机制，监听滚动位置动态加载数据 关键配置包括设置容器高度、定义每项尺寸和处理滚动事件。该技术特别适用于社交动态、商品列

响应式原理与实现 摘要：本文详细解析了Vue3响应式系统的核心原理，重点介绍了如何通过Proxy实现数据拦截。响应式机制的核心在于拦截对象的读取和设置操作，自动追踪依赖并触发更新。文章从基础示例出发，逐步讲解了reactive、ref等核心API的实现逻辑，包括依赖收集（track）、触发更新（trigger）和副作用管理（effect）等关键环节。通过WeakMap、Map和Set构建的多层数据结构管理依赖关系，并展示了如何利用调度器（scheduler）优化更新性能。最后简要说明了ref的实现原理，通过

详细介绍如何在Vue3中实现表单输入与接口验证的无缝联动，并优雅地展示错误提示信息

Husky是现代前端工程化中不可或缺的一部分。Husky的核心价值在于通过自动化工具提升了代码质量和团队协作效率。

随着用户对数据操作便捷性要求的不断提高，具备灵活编辑功能的表格成为了开发中的常见需求。特别是在需要处理大量数据时，不仅要实现数据的分页展示，还要支持对数据的实时编辑，并且要保证在复杂操作场景下的数据状态管理。

Vue封装子组件，对于非必须上传的属性，切不可丢掉 ? 可选链，否则console控制台就会有warn信息，如Missing required prop: "maxlength"。

vue2+element-plus实现树形数据与懒加载实现方式。[Vue warn]: Duplicate keys detected: '111'. This may cause an update error.

TypeError: Cannot read properties of undefined (reading 'indexOf')

Vueu框架中的一个linting规则，对于布尔类型的prop，如果值为true，应该使用简写形式，直接写输入，如disabled,而不是:disabled="true"。这个linting规则是在提高代码的一致性和可读性。

父组件通过v-model传递，子组件通过props:{modelValue: Object}进行接收，通过 emit(‘update:modelValue’, configData.value)事件更新绑定的数据。

Vite在开发环境下基于浏览器原生ES6 Modules提供功能支持，在生产环境下基于Rollup打包；Vue Cli不区分环境，都是基于Webpack。

keep-alive在router-view标签上的使用方法，注意事项及使用场景的介绍

vue项目仅在test/ts测试环境打包中报错

vue中assets和static的区别

vue-cli与vite获取环境变量及动态加载图片的实现方式

antd 表格内嵌children，children有数据就默认展开，且不展示第一列加号

vue打包Module parse failed: Unexpected token

微服务架构并不只是为了在架构上好看，还可以提升开发效率，尤其是庞大的应用系统，由单一应用拆分为多个小型前端应用，每个应用可以实现独立开发和独立部署，项目维护起来也会变得容易很多。

tsx代码实现：import { defineComponent, onMounted, reactive} from '@vue/composition-api'; export defalut defineComponent({ name: 'Demo', setup() { const city = reactive({ list: [] }) const initCityData = () =>

iconfont官网：https://www.iconfont.cn/

项目编译完成，执行npm run serve启动时，报以上错误，原因在于使用npm安装依赖的时候vue-loader-v16有部分资源未下载下来，解决方式：第一步：先卸载未正确安装的vue-loader-v16npm uninstall vue-loader-v16第二步：通过国内淘宝镜像下载该依赖：cnpm install vue-loader-v16如果没有安装cnpm，可以执行下面的命令，使用临时镜像：npm install vue-loader-v16 --regi..

造成上面问题的原因是terser-webpack-plugin版本问题。推荐使用terser-webpack-plugin@4.2.3。更新版本，重新打包即可。

造成上面问题的原因是因为compression-webpack-plugin版本的原因。经测试，目前可使用的最高版本compression-webpack-plugin@6.1.1。更新下版本，重新打包即可。

下面的代码以登录功能为例。功能描述： 用户输入密码时，失去焦点进行密码校验，当输入有误时，显示错误提示信息；只有密码值发生了变化，错误提示信息就移除。<template> <div> <el-form :model="form" :rules="rules" ref="form" label-width="140px"> <el-form-item label="用户名" prop="username"&.

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。如果你需要构建一个中大型单页应用，Vuex将成为一个很好的选择。在中大型单页应用项目中使用Vuex，store文件常用的两种方式：第一种是按照官网核心概念分类的方式；第二种以模块管理的方式。第一种方式的目录：index.js的写法：以下demo是第二种采用模块管理的方式。store的目录是以下方式：在index.js文件中引入modules里面文件以user.js为例，常用的两种写法：第一种，s.

下面实现中英文切换是基于页面刷新才可实现的；如果不想页面刷新，请将翻译内容写在computed属性里。如果不是很清楚，请查看这里<template> <div> <el-form :model="form" :rules="rules" ref="form"> <el-select v-model="form.food" @change="$set(form, form.food, $event)">...

有两种方式可以解决表单验证更新问题第一种：通过computed属性以基础表单为例，代码如下：<template> <div> <el-form :model="form" :rules="rules" ref="form"> <el-form-item :label="$t('form.Name')" prop="name"> <el-input v-model

prop需要是一个变量，以中英文翻译为例，当中英文都是后端返回时，前端应如何处理？下面字段name为后端返回的中文名称，key为英文名称。<el-table-column label="名称"> <template slot-scope="scope"> <span v-if="language=='zh_CN'">{{scope.row.name}}</span> <span v-else>{

代码如下：<template> <div> <el-table :data="list" border > <el-table-column align="center" label="姓名" prop="name"></el-table-column> <el-table-column align="center" label="年龄" prop="age"&gt

第一种，通过methods方法来改变控制属性的值：父组件，代码如下：<template> <div> <child v-if="visible" v-model="visible" :data="list"></child> </div></template><script> import child from './child.vue'; import user

第一步：解析模板成render函数with的用法 模板中的所有信息都被render函数包含 模板中用到的data中的属性，都变成了js变量 模板中的v-model v-for v-on都变成了js逻辑 render函数返回vnode第二步：响应式开始监听Object.defineProperty 将data的属性代理到vm上第三步：首次渲染，显示页面，且绑定依赖初次渲染，执行updateComponent,执行vm._render() 执行render函数，会访问到vm.list

当需要提交多个表单验证时，需分步验证，以两个表单为例，js逻辑如下：export default { data() { return { baseform: {}, advanceform: {} } }}

以普通表单创建为例，代码如下：<template> <div> <el-form :model="form" :rules="rules" ref="form> <el-form-item label="名称" prop="name"> <el-input v-model.trim="form.name" placeholder="名称"></el-inp.

以登录框为例，代码如下：<template> <div> <el-form :model="form" :rules="rules" ref="form> <el-form-item label="名称" prop="name"> <el-input v-model.trim="form.name" placeholder="名称"></el-input&g

MVP传统的开发模式，实质上是面向DOM开发。 MVP：Model，View，Presenter Model: 模型层，也叫数据层 View: 视图层，页面展示 Presenter: 控制层，也叫控制器，与业务逻辑相关，主要用来操作DOMMVVM开发模式，实...

一般轮询都会使用setInterval，但是单独使用它会使页面卡死。下面代码是每个3秒钟轮询一次。export default { data() { return { } }, mounted() { this.getList(); this.timer = window.s...