![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 57
小何程序员
记录技术,分享技术,讨论技术
展开
-
延时加载全局的js和css
一般情况下,例如 echarts 这些库,我们可以直接将对应的js文件放到public文件夹当中,然后在全局的html文件利用script标签引入来使用(或者cdn或者node-module模块)但是如果这些库仅仅用在了一个地方,那么这样的全局引入就比较耗费资源,如果能够在使用的时候再全局引入那才是最好的。如下图22行导入ol.js和ol.css仅仅是在该组件onmounted生命周期触发的时候才引入进来项目当中。我们可以利用loadjs在需要的地方加载进来。这对性能的优化非常有帮助。原创 2022-12-13 16:04:04 · 431 阅读 · 0 评论 -
vue3动态生成的watch不会自动清除
所以vue3中动态生成的watch不会自动清除 销毁组建的 时候需要注意清除。原创 2022-10-29 23:57:53 · 1389 阅读 · 1 评论 -
从源码的角度分析一下vue2中生命周期函数的执行顺序问题
提出问题本文目标是:在源码的角度解决下面的三个问题初次渲染的时候父子组件生命周期函数执行顺序是怎样的?子组件发生更新的时候生命周期函数的执行顺序是怎样的?在销毁父组件的时候父子组件生命周期函数又是如何执行?在源码当中new Vue的时候首先执行的是Vue这个构造函数而构造函数中又调用了一个叫_init的方法(代码如下)function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(t原创 2022-03-26 01:22:42 · 1226 阅读 · 0 评论 -
从源码中分析为什么vue2中直接对数组的元素进行赋值无法触发页面的更新
从源码中分析为什么vue2中直接对数组的元素进行赋值无法触发页面的更新场景代码问题描述原因分析场景代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi原创 2022-03-25 16:20:34 · 2749 阅读 · 0 评论 -
vue闪烁问题的原因
场景代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2022-03-24 19:58:49 · 2789 阅读 · 0 评论 -
antd的table组件中渲染columns的时候无法正确获取到父组件的state问题——个人记录
问题描述首先我使用的是函数式组件 因为封装的原因 我将以下代码都写在了父组件函数里面然后在父组件中我定义了一个state 用于记录某个作用的id初始值是333 (这333后面有用)但是在显示组件的时候 我利用useEffect函数 发起请求 获取后端最新的deptid 然后使用setDeptid对deptid进行从新的赋值当重新赋值deptid以后 我再渲染 table的columns下图是columns中的某一个 操作列如上图 删除按钮是一个deleteItem的函数如图所示该函数原创 2022-01-24 14:26:21 · 2196 阅读 · 0 评论 -
js中sort方法的探讨
sort方法的基本使用相信很多人使用sort方法都是用在基本的升序排序或者是降序排序代码如下探讨1探讨题但是sort其实是可以用来将指定的元素后移例如 下面的sort可以将所有的1 移到最后题目解析值得注意的是 所有的1都排到最后了 但是前面的数的排列顺序 是不会发生改变的,2始终排在3的前面,5始终排在12前面,除了1被排到最后了,其他数的顺序并没有改变。这个有趣的现象得益于返回值是 -1看下面的代码注意代码定义了一个数组arr值为[1,2,3,4,5],在第一次调用sort方法原创 2022-01-17 23:09:59 · 958 阅读 · 0 评论 -
flex布局子元素不溢出不变形的探讨
问题是这样的:我们打算做一个下方图片的布局效果当缩小窗口高度的时候红色和蓝色以及最大的灰色的盒子都相应的缩小,但是前提是红色和蓝色的盒子始终不能溢出到灰色盒子的外面,并且里面的内容也不能挤压,下面的就是反面教材...原创 2021-12-21 12:25:01 · 2582 阅读 · 1 评论 -
flex布局中flex属性的深入探讨
前言首先我们以一个题目来引出flex属性的使用规则问题一如何实现下面图片的效果首先我们可能会提出一种解决方案最大的灰色盒子里面包含着三个小盒子,大盒子使用flex布局,然后每个小盒子设置属性flex: 1; 这样即可完成图片效果。代码如下 <style> .main { display: flex; justify-content: center; align-items: center;原创 2021-12-21 10:39:49 · 904 阅读 · 0 评论 -
element ui中的el-radio组件的源码分析
element ui中的el-radio组件的源码分析源码分析参考文献下面是radio的源码源码<template> <label class="el-radio" :class="[ border && radioSize ? 'el-radio--' + radioSize : '', { 'is-disabled': isDisabled }, { 'is-focus': focus }, {原创 2021-12-17 17:09:41 · 1065 阅读 · 0 评论 -
el-avatar组件显示本地图片资源
el-avatar组件显示本地图片资源场景发生的问题原因解决方案场景我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片于是我直接写上这个相对路径发生的问题结果发现无法显示但是下面的img标签却能够正常显示原因后来发现原因是打包的时候,由于el-avatar的src属性是自定义的属性,所以在保存的时候直接以字符串的形式保存了而不是引用的方式,等打包完以后就直接拿这个字符串放到img标签src中,但是打包后的图片地址已经发生了改变了,已经没有这个图片原创 2021-12-08 11:57:08 · 11872 阅读 · 3 评论 -
对象数组提取每个对象的某个元素生成新的数组并转化为字符串
对象数组提取每个对象的某个元素生成新的数组并转化为字符串目标数组方法一方法二所有代码目标数组 var arr = [ { name: '1', age: '12' }, { name: '2', age: '12' }, {原创 2021-12-07 09:32:46 · 1478 阅读 · 0 评论 -
js语法篇——将一个对象的部分属性转移到另外的一个属性当中
方法一方法二方法三当然也可以直接使用fiter函数或者循环来进行实现如果大家有什么其他更好的方法也可以加评论哦参考文献参考文献传送门原创 2021-11-22 10:32:11 · 3752 阅读 · 0 评论 -
微信开发工具npm安装weui组件
下载安装包下载地址如下https://nodejs.org/en/download/打开官网以后 点击LTS中的msi的64位或者32位下载后常规下一步下一步安装检测是否安装成功然后右击鼠标 点击运行 输入cmd运行再在黑窗口中输入 node -v 检测是否能显示安装的版本 如下图能提示版本号 表示安装成功...原创 2021-04-14 12:11:04 · 742 阅读 · 1 评论