雪急飞绪博客

项目搭建规范

项目打包和自动化部署

在 vue3 中如何使用 jsx开发页面对比 .vue 和 .jsx 文件语法差异

Pinia 与 Vuex 使用区别、用法区别、去掉 mutations、去掉 modules、getters 用法改变

Vue3新功能createAppemits 属性多事件处理Fragment不再限于模板中的单个根节点移除 .sync 改为 v-model 参数异步组件的引用方式移除 filterTeleport以前称为 <Portal>，译作传送门（之前都是放在 APP 里，用这个可随意放置）Suspense可以嵌套层级中等待嵌套的异步依赖项Composition APIreactiveref、toRef、toRefsrea

v-show 和 v-if 区别v-show 通过 CSS display 控制显示和隐藏v-if 通过判断组件真实渲染和销毁，而不是显示和隐藏频繁切换显示状态用 v-show，否则用 v-ifv-if当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，意味着：v-if 将分别重复运行于每个 v-for 循环中，会造成性能问题。所以，不推荐 v-if 和 v-for 同时使用const compiler = require('vue-template-c

Vue 原理原理的意义知其然知其所以然——各行业通用的道理了解原理，才能应用的更好大厂造轮子（业务定制、技术 KPI）如何考察考察重点，而不是考察细节。掌握好 2/8 原则和使用相关联的原理，例如：vdom、模板渲染整体流程是否全面？热门技术是否有深度？重要的原理组件化响应式vdom 和 diff模板编译渲染过程前端路由原理题为何 v-for 中要用 key描述组件渲染和更新的过程双向数据绑定 v-model 的实现原理如何理解 MVVM组件化基础

需求：选择起始日期后截止日期不能小于起始日期选择截止日期后起始日期不能大于截止日期有两种实现方法：选择起始日期，起始日期之前的日期就不让你选择效果如下：选择起始日期，表单校验截止日期不能小于起始日期效果如下：第一种情况：不让选首先不能使用 Element 中的 DatePicker 选择日期范围给 DatePicker 动态配置 pick-options 中的 disableDate 即可对可选日期进行限制注意：如果加value-format 需要给日期格式

vue 中使用 Element 的 upload 组件上传 Excel，大致可以分两种情况使用 action 上传到服务器使用 axios 上传到服务器注意：上传文件可能由于前后端格式不统一导致上传失败application/x-www-form-urlencoded 一般情况下使用这个比较多multipart/form-dataapplication/json使用 action使用 action 时，首先会使用OPTIONS方法发起一个预检请求，从而获知服务器是否允许该跨域请求。服

需求双击 tree上的子节点，把节点文字显示在输入框中（这里简化一下，双击 tree 显示文字即可，省略 $emit 那一步）注解：props 可以接收 defaultExpandAll（是否默认展开所有节点）效果如下：基本代码树组件代码<template> <el-tree id="tree" v-loading="treeDataLoading" node-key="id" :data="treeData" :default

后端文件流首先点击导出 Excel ，这里调用接口成功接下来看一下后台返回的数据是什么样，是文件流格式（OutputStream）在处理之前，说几个要注意的点注意：后端在这里一般会设置如下几个请求头// 设置返回类型为excelresponse.setContentType("application/vnd.ms-excel; charset=UTF-8"); // 设置返回文件名为filename.xls response.setHeader("Content-Dis

安装文件安装 xlsx 库npm install xlsx安装 file-saver 库npm install file-saver如果需要打印表格，安装 vue-print-nb 库npm install vue-print-nb导出表格主要使用的是 js-xlsx，导出 Excel 文件，主要是如何生成一个 sheet，之后将这个 sheet 转成最终 Excel 文件的 blob 对象，然后利用 URL.createObject 下载配置生成 Excel

需求分析（长列表展示）页面某处需要渲染 1w+ 条数据，并需要滚动展示，这时如果直接把这些数据渲染到页面上，会导致系统内存大量被占用，导致页面卡顿或崩溃我们都知道，每次 DOM 修改，浏览器都会重新计算元素布局，再重新渲染（回流 / 重绘）。如果数据量很大，页面计算时间就会加成，造成页面卡顿解决方案根源：DOM 元素太多思路：限制元素数量 / 虚拟DOM后台数据格式：[ { checked: 0， data: "xxx"， labe

动态路由后台管理系统，大部分都会涉及到权限控制这一项需求，即：根据不同登录角色渲染不同页面功能现在主流有两种方式：前端控制逻辑简单，上手快后端控制相对安全，需要后期改动前端控制可以参考花裤衩的文章，手摸手，带你用vue撸后台 系列二(登录权限篇)核心：通过 token 获取用户的 role，根据 role 动态跟路由表 meta.role 进行匹配，形成可访问的路由再通过 router.addRotes 动态挂载路由具体代码结构：可以参考：动态路由前端控制还是后端控制？（

Element 日期选择器问题条件查询中需要根据日期进行筛选，为了用户便利性展示清除按钮当点击清除按钮后进行查询（get 请求），报 500 了，看一下 Network，并没有进行 url 拼接（startDate 没有拼接到 url）检查 api 文件的 params 参数，发现 params 中的 startDate 值为 null到这里就出现了两个问题：startDate 为什么赋值为 null 了（input 清除之后值变为空字符）我使用的是 Axios 为什么，值为 null

FormData 上传将本地数据上传或导入数据库，有时候需要使用 FormData 对象。FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，组成一个 queryString 提交到后台创建一个 FormData 对象实例// js中let formDataJs = new FormData()// vue中let formDataVue = new window.FormData()FormData 常用方法formData 里存储的数据格式是 key/

项目原因，需要把一个扁平/线性数组转换成树形数组（符合 el-tree 数据要求）const resData = [ { id: '1', label: '动物', parentId: '', icon: '' }, { id: '2', label: '狗', parentId: '1', icon: 'icon-chongwutubiao13' }, { id: '3', label: '哈士奇', parentId: '2', icon: 'icon-hashiqi' }, { id

jsencrypt 进行 RSA 加密npm i jsencrypt生成 RSA 密钥对将生产的公钥和私钥复制过来import JSEncrypt from 'jsencrypt/bin/jsencrypt'const publicKey = `非对称加密公钥`const privateKey = `非对称加密私钥`const txt = 'hello world'/* 加密 */function encrypt(pass) { const encryptor = ne

国际化安装 i18ninternationalization 这个单词中，i 和 n 之间有 18 个字母当前 i18n 最新版本为 9 版本，9 版本没有 VueI18n，import VueI18n from 'vue-i18n' 解构会报错 Cannot read property 'install' of undefinednpm install vue-i18n@8i18n 文件夹下的 index.js 文件require.context它允许传入一个目录进行搜索，一个标志指示是

Axios二次封装/* * 对Axios的二次封装，目的:把当前项目中，所有请求的公共部分进行统一处理 * + axios.defaults 设置公共的配置项 * + axios.interceptors 基于拦截器做统一处理 */// 配置请求接口的统一前缀「webpack环境，我们根据环境变量的值，设置不同的前缀，来区分不同的环境」// + 开发 development// + 测试 test// + 灰度 grayscale// + 生产 productio

Vue 自定义指令应用场景这段是从官网 copy 过来的，相信应该都一看就明白的bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用unbind:

二次封装 Element select项目中出现多个地方使用相同的 <el-select> 标签，且更改的时候，下面的数据会自动发生改变。为减少代码对其进行二次封装是很有必要的，一般可以考虑如下几点：在封装的组件里发送数据请求，这样能降低耦合性（解耦）可以使用 v-bind="$attrs" 将父组件调用子组件时传入的属性展开（排除被 prop 注册、class、style）可以使用 v-on="$listeners" 将父组件调用子组件时传入的方法展开可以使用 v-model 当子