- 博客(158)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 vue页面刷新时，执行了哪些生命周期——谨慎使用beforeDestroy和destroyed
在页面刷新时，并没有来得及执行destroy，与把页面关闭再重新打开的效果是一样的。
2020-06-08 19:46:26
27189
11
原创 el-dialog遮罩层覆盖弹框（z-index值大的图层在z-index值小的图层下面）
一、问题 如下图所示，本应该出现在遮罩层上面的弹框，出现在了遮罩层下面。 审查元素时看到，遮罩层的z-index为2042。 将遮罩层隐藏，查看弹框的z-index为2043。二、原因 z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在...
2019-11-13 18:17:50
16186
6
原创 Cannot checkout from svn:svn:E170013:Unable to connect to a repository at URL '' svn:E230001:Server.
前几天公司服务器被黑了，运维部门重新建立了svn账号，重新分配了项目地址。当使用IntelliJ IDEA checkout项目时，弹出如下错误提示： 因为IDEA保存的还是之前svn账号信息，所以check新项目是没有权限的。可以在终端通过以下步骤来修改svn账号信息1、输入checkout命令，回车svn checkout https://...2、...
2019-07-02 10:35:25
23208
16
原创 vue项目中子组件watch不到父组件传递的props变化
一、现象 父组件中引入了一个弹框组件，并传递props——columnField。子组件中watch该props的变化，并执行相应操作。代码如下父组件子组件 当父组件中执行openSetFieldDialog方法时，columnField的值发生了变化，但子子组件并没有监听到。二、原因 我在父组件的data中定义columnField...
2019-05-30 14:02:31
13811
原创 el-dropdown-item的点击事件
在vue项目中使用element-ui时，经常会用到Dropdown组件。有时需要在子菜单上添加click事件。但是官方文档中并没有给出el-dropdown-item的点击事件。 若直接在el-dropdown-item上添加click事件，点击后没有任何反应。若在click后添加native修饰符，则可解决问题。代码如下：<el-dropdown>...
2019-05-22 14:02:36
30124
14
原创 微信小程序闪退-慎用wx:if
一、现象操作：通过扫描小程序码进入小程序，无其他操作 设备：某些安卓手机，如部分华为P20，OPPO r11，小米mix3等 微信版本：7.0+（当前最新版本） 操作系统：均为当前较新系统 出现概率：大部分机型不会出现，少数机型20%左右，少数机型80%左右二、排查原因使用微信开发工具的 Audit 功能无异常 清缓存无效 关闭多余运行程序无效 网速正常 大多为较新机型，...
2019-04-22 09:57:17
11790
原创 js中的sort排序原理
一、问题的起因偶然发现，在某些浏览器中显示的图表，日期排序混乱，如下图。逐步排查原因：1、接口返回的数据没有问题2、大部分浏览器显示没有问题，只有Chrome浏览器有问题3、新版本的Chrome浏览器没有问题，出现问题的浏览器版本在70以下二、真相只有一个 考虑到谷歌浏览器在70版本后，对sort方法进行了调整，遂定位到问题的原因为sort排序的问题。为了...
2019-04-02 15:54:36
14522
原创 小程序下拉不触发onPullDownRefresh
首先，按照文档上的步骤，先在app.json的window选项或页面的配置中设置{ "enablePullDownRefresh":true, "backgroundTextStyle":"dark" //设置该选项可以显示刷新动画（三个点）} 其次，在Page中注册onPullDownRefresh方法 onPullDownRefresh: fun...
2018-12-24 11:48:33
10093
19
原创 vue动态添加表单并验证
Vue中的表单验证很简单，但若是动态添加的表单，如通过v-for循环出来的动态表单，就需要想额外的办法了。 查找资料，一篇文章写的很详细，原文在这里。但我按照文章里的步骤做完之后，怎么都不生效。最后检查了很久才发现是一个地方的配置写错了位置。由于配置的地方比较多，可能会有不少和我一样马虎的盆友会写错，所以在这里重点标注一下需要注意的地方。 红色框是需要配置的部分，蓝...
2018-11-19 20:40:58
14146
原创 多个项目使用的node版本不一致？vscode dev container + docker 真香
遇到这种情况，多数情况会使用 nvm 进行 node 版本管理，具体使用方法可戳。但若要并行开发两个不同环境下的项目，不停切换node版本，也难免有些繁琐。此时，使用 docker + vscode 可以实现多个不同环境的并行开发。
2023-08-14 18:45:00
780
原创 使用docker模拟生产环境-复现生产环境bug
在build项目时，production模式下打包出的项目文件与其他模式略有不同，导致生产环境与开发环境运行差异。1、安装docker（本文不赘述docker安装过程，可自行参考其他文章），在项目根目录创建docker文件夹。执行成功后，可在docker中看到创建的应用，点击按钮，即可在浏览器中打开。4、创建docker镜像，imagesName 为创建的镜像名称（注意命令后面的点.)6、创建docker应用，appName 为创建的应用名称。执行成功后，可在docker中看到创建的镜像。
2023-04-01 13:14:41
463
1
原创 vue3项目element-plus由v2.1.x升级到v2.2.x可能遇到的坑
以下是给项目升级element-plus版本时遇到的warning或样式错乱问题，不一定全面，但应该覆盖了大部分常用组件的变更。升级后：2、upload组件升级前：上传input所在div 与 文件列表ul 为兄弟组件升级后：上传input所在div 与 文件列表ul 为父子组件由于DOM结果发生变化，若有自定义样式，需关注。3、form组件升级前：升级后：表单label的布局及对齐方式发生变化，若使用slot自定义了label样式，需关注。 4、table组件tab......
2022-05-26 20:45:00
4319
11
原创 element-plus按需引入
项目中只用到一个 element-plus组件？全局引入项目太重？按官网文档引入后报错？看这里就对了。1、安装并引入 unplugin-element-plus（参考链接）npm i unplugin-element-plus -D// 以 vue.config.js 中的配置为例module.exports = { configureWebpack: { plugins: [ require('unplugin-element-plus/webp...
2022-04-06 15:22:42
7795
原创 Cannot read properties of null (reading ‘insertBefore‘)
一、报错现象vue3 + element plus 项目，本地启动时，页面进行所有操作都正常；部署到生产环境后，数据驱动DOM变化的操作会导致如下报错。二、可能原因及解决方案经过分析出现报错的操作步骤及多方资料查询，不同情况下的报错，其原因不同。遇到这种问题的同学可以从以下几方面进行排查。1、v-if 导致在 v-if 值为 false 时，如果操作了 v-if 控制的 DOM，可能会因为该 DOM 元素不存在而报错。解决方案：v-show 替换 v-if2、...
2022-04-04 13:51:39
18732
1
原创 vue3中watch与watchEffect的异同
watch 和 watchEffect 都是监听器，有很多相同点，也有些不同点。一、相同点1、都可以监听数据的变化import {ref, reactive, watch, watchEffect} from 'vue'export default { setup() { const stateRef = ref(0) const stateReactive = reactive({num: 0}) watch(sta...
2021-11-27 16:32:48
450
原创 Definition for rule ‘vue/script-setup-uses-vars‘ was not found.eslint(vue/script-setup-uses-vars)
项目增加了几个依赖包，npm i执行完后，每个文件的开头都出现了eslint报错，如下图 官网中有对 vue/script-setup-uses-vars 规则的说明，其对该规则的描述为Prevent<script setup>variables used in<template>to be marked as unused 即，防止将定义在< script setup >标签中，但在template...
2021-11-13 19:25:50
3621
原创 Git:Terminal is dumb, but EDITOR unset
一、问题出现背景（重现步骤） 使用 vscode 执行 pull rebase 后有冲突，解决完冲突后，执行 commit 时，弹出报错弹框。二、解决方案在网上找了很多解决方案，但都没解决自己的问题，可能是每人出现问题的背景不一样，虽然报错信息是一样的。自己摸索的解决方案，解决了自己的问题。不一定适合所有人，但可以试试。以下操作都通过在 terminal 中输入命令执行，暂时不使用 vscode 的可视化操作。1、先查看一下git当前的状态git s...
2021-10-16 09:53:32
2749
原创 git命令及vscode中的git操作
最近用 git 协作开发比较多，遇到冲突和各种问题的概率也增加了，特此记录一下 git 的命令行操作以及 vscode 中对应的部分可视化操作。一、查看操作1、查看当前git状态，可查看当前是否有修改待提交的文件。git status2、查看操作记录，可查看最近几条操作记录，包括操作的时间、作者、注释信息等。git loggit log --author 'Liyn' // 查询某个作者的提交记录3、查看修改差异git diff4、...
2021-09-12 17:16:44
2260
原创 vue3 通过动态 ref 获取 v-for 中的组件
vue3中通过ref获取组件的方式与 vue2 写法有些不同，先来介绍一下 vue3 中获取组件的方式。<template> <div ref="cptRef">...</div></template><script>import { ref } from 'vue';export default { setup() { const cptRef = ref(null); /...
2021-09-01 18:48:13
12470
7
原创 axios封装对重复请求的拦截
有些请求是不应该重复发起的，比如提交表单的post请求或刷新页面数据的get请求。当首次请求未响应时，大部分情况下不应再发起重复请求，这时就要对重复请求进行拦截。拦截操作可在axios的请求与响应拦截器中统一进行。import axios from 'axios'import { baseURL } from '@/config'const instance = axios.create({ baseURL: baseURL, timeout: 30000 });// 定义存放已发送...
2021-08-28 09:39:02
610
原创 vue3项目中使用微信开放标签wx-open-launch-weapp实现点击跳转到微信小程序
一、vue.config.js配置 在vue项目中，直接使用微信开放标签会报错，所以要配置忽略对微信标签的校验，在 vue.config.js 中增加如下配置。module.exports = { //...其他配置 chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(options => { options.compile...
2021-08-22 15:50:34
5453
10
原创 element-plus中带快捷选项的日期时间范围选择器，按官方demo日期范围错误
最近用到element-plus中带快捷选项的日期时间范围选择器，如上图，官方案例左侧提供了最近一周、最近一个月、最近三个月快捷选项。 但当我按照官方示例用法放到自己项目中时，输入框中显示的时间范围却是错误的，起始时间与终止时间永远只显示当前时间。 一度怀疑自己用法不对，直到将官方demo代码完全复制到项目中，发现还是错误。最终将demo 中的 shortcuts 定义，改为如下即可。shortcuts: [ { text: '最近7...
2021-08-15 11:13:44
1800
5
原创 el-upload与vue-cropperjs在vue3项目中的应用-实现图片裁剪后再上传服务器
<template> <el-upload ref="elUpload" accept=".jpg,.png" :autoUpload="false" :uploadChange="uploadChange" :httpRequest='httpRequest'> <img :src="url" /> </el-upload> <el-dialog title="图片裁剪" v-model="show.
2021-08-07 17:03:00
1590
4
原创 防抖节流的原理和使用场景，并实现防抖函数和节流函数
一、问题背景 开发中，经常会遇到以下场景：监听鼠标移动 onmousemove，监听页面滚动 onscroll，监听大小变化 onresize，监听 input 输入等。这些场景下，事件会被频繁触发，但我们并不想事件被频繁触发，这时就需要通过防抖和节流来限制频繁操作。二、两者区别 防抖和节流都是为了解决事件频繁触发的问题，但在实现原理上有些不同。 防抖函数（debounce）是在短时间内多次触发同一事件时，只执行第一次或最后一次。根据执行时机，可有两种写法。...
2021-07-24 16:30:00
964
原创 vue2.0与vue3.0的区别—教你快速从vue2转换到vue3的开发
使用vue3开发过一段时间了，开发过程中总结了些语法上的区别。下面不去考虑原理和源码，只在使用方式上列出两者的区别，有了这些，可以让开发者快速从vue2转换到vue3的开发中。一、入口文件main.js1、引入vue vue2.0写法import Vue from 'vue' vue3.0写法import { createApp } from 'vue'const app = createApp(App)2、挂载vue实例 vue2.0写法n...
2021-07-18 09:19:42
1751
1
原创 vue3动态注册路由，test环境下“Cannot find module“
通过如下方式动态注册的路由{ component: () => { return import('../' + component + '.vue'); }, name, meta, path: 'index'} 开发环境和生产环境下没有任何问题。但在测试环境下，报如下错误 经过调试，发现把 import 改为 require 就可以了。 然而too young too simple，在洋洋得意的...
2021-07-10 15:48:55
951
原创 vue3项目，webpack打包后部分文件丢失
configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 仅在生产环境下启用该配置 return { performance: { // 打包后最大文件大小限制 maxAssetSize: 1024000 }, plugins: [ new Compress...
2021-07-01 20:38:01
4110
原创 有哪些数组操作？哪些操作不会改变原数组？
作业帮面试题，原题目是“哪些数组操作不会改变原数组？”，这里扩展一下，列出了所有的数组操作。1、shift 删除数组中第一个元素，返回被删除的元素，改变了原数组array.shift()2、pop 删除数组中最后一个元素，返回被删除的元素，改变了原数组array.pop()3、unshift 向数组开头追加元素，可追加一个或多个元素，返回新数组长度，改变了原数组array.unshift(item1,item2,...)4、push 向数...
2021-06-24 22:35:05
3330
原创 一个项目同时用svn和git进行版本控制
总是能遇到奇奇怪怪的需求，但总要耐耐心心的寻找出路。还好在踩完坑后，整理出来一套不太复杂的解决方案。1、将svn项目检出到本地svn checkout 'http://...'注意事项：1、尽量在空文件夹中进行操作，避免被其他项目的svn或git污染，导致不必要的麻烦。2、git仓库地址尽量是空的，尽量避免出现readme文件，否则push时还需要合并代码。...
2021-06-17 08:54:58
2334
原创 有哪些遍历数组的方法？
京东面试题，当时只想起来几个简单的方法，回头一总结，还真不少。下面以数组求和为例，列举想到的所有数组遍历方法。若有没写出来的，欢迎大家评论补充。const arr = Array.from(Array(100), (itm,idx) => idx+1);let sum = 0;1、forEacharr.forEach(item=>{ sum += item})2、for循环for(let i=0; i<arr.length; i++){ sum
2021-06-12 16:48:59
744
原创 大厂高级前端面试题
最近忙着面试、入职、熟悉新项目，好久没更新博客了。终于忙里偷闲来更新一波。有些问题可能记不清了，能记下来的分享给大家。有些问题多个大厂问到，随便写在其中一个里面了。一、京东1、多层嵌套表单的校验2、vue2.0与vue3.0的区别3、call和apply方法4、有哪些遍历数组的方法5、项目部署6、egg.js7、找出[0,1,2,...,1000]数组中0出现的次数二、百度1、前端存储有哪些？区别是什么？2、hash冲突3、对原型和原型链的理解4、如何取出
2021-06-03 22:03:18
690
原创 使用WebPageTest测量网页性能及报告解读
WebPageTest是一款非常强大的网站性能测评工具，可以选择不同的测试地址、服务器和浏览器。除了需要科学上网外，使用起来还是比较简单方便的。首先进入官网，可以简单的选择测试地址和浏览器。点击Advanced Settings，展开高级设置，可以看到更多的设置项。其中： Connection：链接网络设置，可以选择2G/3G/4G等； Number of Tests to Run：测试次数，最多9次，用于多次测试取平均值，减小误差； Repeat View...
2021-03-08 21:13:32
2718
原创 衡量网站性能的指标与测量工具
随着项目功能的丰富与完善，性能问题日益凸显，接下来的文章将由浅入深的分享一些性能优化过程中用到的方法和工具。首先，在优化前，我们要对自己的页面有所了解，响应慢，有多慢？操作卡，有多卡？性能低，有多低？这些都需要一个数据来衡量。优化后，也需要同样的数据来对比判断优化的效果。而不是凭借个人的主观感觉来评判页面性能。一、在之前的文章（Chrome DevTools调试技巧之Network）中，简单介绍了一些描述性能的指标，下面再详细介绍一下network面包中与性能相关的指标。下面是一个请求的waterf
2021-03-02 19:22:39
759
转载 Vue.js的九个性能优化
看到一篇文章，干货满满，为了加深自己的印象，转帖过来，同时增加了自己的检验结果和一些思考，原文链接 一、函数式组件，Functional components优化前代码<template> <div class="cell"> <div v-if="value" class="on"></div> <section v-else class="off"></section>...
2021-02-24 19:13:05
317
原创 addEventListener不及时remove造成页面卡顿
最近在调试页面性能时，发现由addEventListener添加的keyup和keydown事件一直在执行，甚至当持续按键一段时间松开后，方法里的log还在输出。可见其对性能的影响很严重，已经造成了页面卡顿。先来复习一下addEventListener的用法。element.addEventListener(event, function, useCapture)其中：event是需要绑定的事件名，可绑定的事件，可参考这里。但要注意的是，绑定时不要加'on'前缀。function是绑定
2020-12-14 19:32:15
1739
原创 使用Sentry监控前端错误日志
最近给客户部署的项目中，偶尔会出现一些非必现的bug，调试起来很不方便。于是在项目中引入Sentry，来记录错误日志。Sentry是一款用于应用监控和错误追踪日志平台，支持vue、react等多种语言框架。分为客户端和服务端，客户端嵌入需要被监控的项目中，程序出现异常就会向服务端发送消息，服务端可以查看到日志详情。使用时可以直接使用线上服务，也可在本地部署。下面介绍一下本地部署的步骤和使用方式。官方推荐的是使用docker部署（官方文档），这里也以docker为例，搭建Sentry服务。docker
2020-12-04 17:13:56
908
1
空空如也
el-select的change事件，如何传递多个值？
2020-05-26
TA创建的收藏夹 TA关注的收藏夹
TA关注的人