wen_文文-优快云博客

const [count, setCount] = useState(0)；为什么count变量更新后不能立即拿到新值？因为setCount函数用于更新 count值。它接收一个新的 count 值并将组件的一次重新渲染加入队列中，在组件的重新渲染中，useState()返回的第一个值始终是count更新后的新值，所以如果组件还未重新渲染就直接读取count变量的话，拿到的就是未更新的旧值；...

2022-07-21 11:21:19 6952

原创 Nuxt中全局路由守卫的写法

1、在middleware中定义，全局middleware或布局middleware中；（server端执行）全局middleware中定义：a、在middleware文件夹下新建auth.js文件，在此文件中通过上下文对象context.route实现路由拦截；b、在nuxt.config.js文件的router配置项中引入该中间件；// auth.js文件：export default function ({store, route, $axios, redirect, req})

2022-04-24 10:26:24 5708 6

原创 JS中数组遍历方法

示例中的数组为：var arr = [ { id: 1, name: '王昭君' }, { id: 2, name: '安琪拉' }, { id: 3, name: '鲁班七号' },];var nums = [1, 2, 3, 4, 5];1. 普通for循环；for (let i = 0; i < arr.length; i++) { console.log(arr[i], i);}2，forEach循环；arr.forEach((ele, inde

2022-03-03 10:29:26 4071

原创 diff算法浅析

本文主要对最近学习的diff算法做个总结，会对node节点存在key时的diff算法和节点key不存在时的diff算法进行浅析，节点key存在时的最大索引法，双端比较法，最长递增子序列法进行逐一学习；会结合部分源码函数进行代码分析和执行分析；1. 节点没有key值时所采用的算法；Vue3中在节点没有key的情况下采用的算法；1.1 遍历新旧节点数组中长度较小的节点数组，应用patch函数进行更新；1.2 对比新旧节点数组的长度，如果newNodeChild.length > oldNode.

2022-02-18 14:25:38 759

原创 canvas绘制图形的相关API

1.直线：不同的端点样式；2.弧线；3.二次曲线；4. 矩形；5. 线性渐变；6.径向渐变；7. 通过图像数据获取原始图像的黑白版；8. 图像尺寸；以上实现的相关代码放在了：css-animation/canvas at main · 809877665/css-animation · GitHub全文参考：《javaScript高级程序设计》第四版...

2022-01-16 20:45:12 599 2

原创 Vue组件按需引入时v-if和v-show的区别

普通加载：在父组件中先import子组件，然后在components模块中注册子组件，在进入页面时，会随着加载当前页面的js文件就加载子组件的内容；子组件的内容和父组件的内容在同一个js文件；按需加载：子组件显示的时候，才会去加载子组件的内容；子组件内容和当前页面的js不是一个文件；v-if: 在条件为真时才去加载需要显示的组件；条件为真时元素才会渲染出来；v-show: 不管条件是否为真，在一进入页面就会去加载组件；且页面上元素已经渲染了，只是将其隐藏而已；组件引用时使用按

2021-12-02 15:19:15 1643

原创＜＜浏览器工作原理与实践＞＞读书笔记

1. 进程和线程的区别概念：进程：操作系统进行资源分配和调度的基本单位；程序的运行实例；（在我们启动一个程序的时候，操作系统会为该程序创建一块内存空间，用来存放代码，运行数据，和执行任务的主线程，这样的运行环境称为进程）线程：是程序执行的最小单位；不能单独存在，由进行启动和管理；区别：1）进程中任务线程执行出错，都会导致整个进程崩溃；2）线程共享进程中的数据；3）当一个进程关闭后，操作系统会回收该进程占用的内存空间；4）进程间内容相互隔离；5）一个进程可由一个或多个线程构成，

2021-11-14 22:47:51 1477

原创手写数组中常用的ES6方法

// 手写Array.map方法 Array.prototype.map2 = function(callback, args) { if(typeof callback !== 'function') { throw new TypeError('callback is not a function') } let oldArr = Object.values(this) // 此时的this指向调用该方法的数组的对象 ...

2021-11-02 14:33:03 147

原创手动实现ES6中的模板字符串

1.手动实现ES6中的模板字符串 ${}， // 手动实现模板字符串 ${}，对应正则表达式为： /\$\{(.*?)\}/g function templateStr(str) { /* m：匹配的字符串；p1：匹配正则中第一个元组的字符串；index: 匹配的字符串在整个字符串中的开始下标，str: 当前完整的字符串； replace函数使用法参考：https://developer.mozilla.org/zh-CN/docs/Web/Java.

2021-10-29 10:43:47 360

原创 iview中轮播图组件在loop自动播放时，添加的点击事件有时不触发

问题描述：使用iview中的Carousel组件并开启自动播放loop时，点击每个轮播图片时进行对应事件处理；但是轮播循环一周后，点击轮播图片时点击事件并没有触发；刚开始时点击事件添加在每个轮播块CarouselItem上；代码如下：<Carousel class="Carousel-list" :autoplay="getAuto" loop :radius-dot="false" :autoplay-speed="2500" arrow="always"> <Caro

2021-10-20 17:33:35 1099

原创 nginx部署多个前端项目（基于location配置）

基于loaction配置；同端口，同域名，不同的前端项目目录；项目1：放在/www/dist目录下；项目2：放在/www/dist2目录下；server { listen 8888 default_server; server_name localhost; location / { root /www/dist; index index.html; } ..

2021-09-23 21:46:24 4621

原创 Vue项目打包部署到Nginx服务器步骤总结

前期准备工作：1.准备一台服务器；2.根据服务器的系统环境安装配置Nginx;3.了解Nginx的配置文件，了解常用的linux系统操作命令4. 进行Vue项目的打包部署因为我只是单纯的想试下平时我们打包好的dist文件是怎样部署到服务器，并让它跑起来的，所以我就选择了华为云服务器里面开发版试用一个月的免费服务器；1. 服务器准备在华为云官网注册账号，并选择好系统环境进行申请，一般我们选择的都是Linux系统，但是Linux系统中又分为两种：RedHa...

2021-09-06 00:32:35 4776

原创浏览器滚动条样式重置

/* 外层滚动条轨道 */ ::-webkit-scrollbar-track { background-color: violet; } /* 内层滚动条滚道样式（没有滑块的轨道部分） */ ::-webkit-scrollbar-track-piece { width: 10px; height: 20px; background-color: yellowgreen; -webkit-b...

2021-09-02 17:16:41 416

原创将Vue项目打包时生成的chunk文件名中波浪线~替换为-

解决方案：webpack官网参考文档：https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksautomaticnamedelimiteroptimization: { splitChunks: { // 指定用于生成名称的分隔符。 automaticNameDelimiter: '-' } }...

2021-08-10 17:50:26 612

原创页面滚动时判断元素是否在可视区域内

/** * @description: 判断dom元素是否在可视区域内 * @param: el: Vuecomponnet对象 * @returns: true-在可视区域，false: 不在可视区域 */export const isElementInViewport = function(el) { let s = el.$el.offsetTop // 元素相对于页面顶部的距离 let x = el.$el.offsetHeight //元素自身高度 let.

2021-07-07 18:29:33 1197

原创项目开发踩坑记：ElementUI的Radio组件change事件触发两次？

刚开始是一直在网上百度，说Radio标签解析后包含input和label标签，所以点击时一次是在input标签上，一次是在label标签上，所以是触发了两次，看了下控制台解析情况确实是这样，但是按照网上的解决方法试过之后都不行；具体解决方法有: 1. 在点击事件上添加标签名的判断，确保只执行一次：if(e.target.tagName==='INPUT') return <el-radio v-model="test" :label="0" @click=...

2021-07-07 17:19:48 4000

原创动态创建标记的一些方法

1.document.write(str)：将str插入到文档中显示，不常用，因为结构，行为，表现不分离； var str = `<p> This is <em>my</em> content </p>` document.write(str)2.dom.innerHTML属性，支持 read 和 write，会将原来节点中的内容全部替换； var testdiv = document.getElementB...

2021-06-28 21:43:17 589 1

原创 CSS层叠规则解析

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { background-color.

2021-06-22 20:40:34 829

原创 onmouseenter和onmouseover的区别

onmouseenter 和 onmouseleave是一对， onmouseover 和 onmouseout 是一对区别：onmouseover/onmouseout 触发子元素的事件时，子元素通过事件冒泡触发父元素对应的事件；可以通过阻止冒泡 stopPropagation() 避免父元素事件触发； onmouseenter/onmouseleave 触发子元素事件时，不会触发父元素对应的事...

2021-06-02 22:07:35 3277

原创树形结构中根据id获取指定节点

/** * @description: 根据id获取指定节点 * @params: id-要查询的节点id * @params: tree-树形结构的数组 * @return: 要查找的节点对象 **/ var getItemByIdInTree = (id, tree) => { let res = null for(let i=0;i<tree.length;i++) { let ele = tree[i] if(.

2021-05-27 22:30:18 2537

原创 ES5中遍历数组的方式：

//ES5中数组的遍历方式//1.普通for循环；支持break，continue；//2.forEach循环：写法简洁，但是不支持break，continue;//3.every：返回true时继续遍历，返回false时停止遍历，可以模拟break，continue效果//4.for...in：转为对象设计的:支持break，continue效果var arr = [1,2,4,3,5]// 遍历每一个元素arr.every(ele=>{ cons...

2021-05-15 16:22:04 273

原创常用的正则表达式集合

1. 密码匹配6-16位，至少包含数字，大写字母，小写字母，符号中的两种（大写字母和小写字母算两种）var passWordReg=/^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,16}$/2. 密码匹配6-16位，至少包含数字，大小写字母，符号中的三种（大小写字母算一种）var passWordReg =/^(?=.*[A-Za-z])(?=.*\d)(?=.*[\\~!@#$%^&*()_+{}|:"<>?,./;'...

2021-05-10 16:39:32 81

原创 lowdb在Vue项目中的使用；

介绍：轻量级本地JSON数据库；使用JSON为存储的数据结构，基于lodash（https://www.lodashjs.com/）开发；实际应用：Vue项目中Vuex存储数据，刷新页面时数据丢失的问题；此种情况下可用lowdb＋LocalStorage适配器解决；即在路由钩子函数 beforeEach中重新加载数据，从lowdb中获取数据，并将获取的数据重新放入Vuex的state对象中；每次更新state中的数据时，同时也更新lowdb中存放的数据；...

2021-04-22 16:33:55 3046

原创在Vue项目中使用debugger后，项目启动报错：error Unexpected ‘debugger‘ statement no-debugger

解决方案： 1. 在项目根目录下添加.eslintrc.js文件并配置其中的rules， 2. 重启项目即可；.eslintrc.js文件的rules中的内容如下：module.exports = { root: true, env: { node: true }, rules: { /* 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'...

2021-04-22 15:42:54 2529

原创使用npm创建并发布包时遇到的常见问题

1.、npm publish发布包时报错403登录自己的npm账号，查看是否已进行邮箱验证，如果未进行验证，网站最顶部会有一句提示；我是没进行邮箱验证所以会报错，但是和网上说的未进行邮箱验证的详细报错有不同，但是报错代码都是4032、删除指定版本：npm unpublish xxxx@版本号3、当前的npm镜像为淘宝镜像：切回原本的镜像源： npm config set registry https://registry.npmjs.org/设置镜像源为淘宝镜像：npm config set

2021-03-19 11:37:55 786

原创 Element-UI中根据某个固定字段合并对应的表格行，

因实际业务需求，此处根据purchaseNo字段进行表格行合并；a. 先根据purchaseNo字段将表格数据排序，purchaseNo相同的数据排在一起b. 在表格上添加合并行列的方法；:span-method="arraySpanMethod"官方说明：（通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一

2021-03-19 11:18:24 1226

原创 JS中的原型链面试题--Foo和 getName

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> f.

2021-03-13 16:55:21 475

原创 JS中常用知识点

1. 在前端页面实现价格的自动计算：即price = price1 + price2(价格均保留两位小数) <Row> <Col :span="12"> <FormItem label="价格1" prop="price1"> <Input v-model="formData.price1" @on-blur="...

2021-03-04 15:05:56 312 2

空空如也

空空如也