hong_鸿-CSDN博客

原创 nvm安装多版本node管理工具

如果当前已经安装node，在控制面板中卸载当前node，然后在安装nvm。安装成功以后，使用 nvm -v 命令可以查看当前nvm版本号。运行代码时如果报这个错误可以重启一下电脑。一直点击下一步安装即可。

2024-05-16 22:24:37 346 1

虽然 WebSocket 是一种双向通信协议，但在某些情况下，网络设备、代理服务器或防火墙可能会限制连接的空闲时间或导致连接超时。设置心跳机制可以解决这个问题。WebSocket 提供了一种双向通信机制，可以在客户端和服务器之间建立持久性连接，实现实时的数据传输。在前端，你可以使用 JavaScript 中的 WebSocket API 来创建 WebSocket 连接，并监听来自服务器的消息事件。一旦建立了连接，服务器就可以随时向客户端发送消息，而不需要客户端发起请求。

2024-04-22 10:12:22 243 1

原创 vue中如何使用svg

1.安装svg使用依赖包npm install svg-sprite-loader 2.配置vue.config.js chainWebpack(config) { config.module .rule('svg') .exclude.add(resolve('src/icons')) //注意svg的存储地址 .end() config.module .rule('icons') .test(/\.svg$

2022-02-19 11:28:59 17524 3

原创虚拟dom

文章目录什么是虚拟dom虚拟dom的优点虚拟dom的缺点什么是虚拟dom一个能代表dom树的对象，通常含有标签名、标签上的属性、事件监听和子元素们，以及其他属性虚拟dom的优点减少dom操作虚拟dom可以将多次操作合并为一次操作比如：要添加1000div，但是没有虚拟dom可能需要一次一次添加，但是react和vue可以往数组中放一个文本，然后一次性放到页面上。虚拟dom可以借助dom diff的算法可以把多余的操作省略比如：页面上有990个节点，现在要添加十个节点，如果采用js,i

2021-09-28 18:21:36 122

原创 diff算法

先看以下两种情况<div :class="x"> <span v-if="y">元素1</span> <span>元素2</span></div>（1）当x位置发生变化时首先diff算法会从上向下开始比较，发现div标签不变不需要更新，div中的class属性发生变化只需要修改对应的属性，span没有发生变化保持不变，元素没有发生变化保持不变。（2）当y位置发生变化时diff算法同样.

2021-09-28 18:09:50 242

原创从输入url到页面展示中间到底发生了什么

文章目录用户输入URL请求过程准备渲染进程提交文档渲染阶段当用户向地址栏输入一个URL地址，到页面渲染一般分为如下几个步骤用户输入首先当用户向地址栏输入一个关键字时，浏览器会首先判断输入的是一个信息还是一个URL地址。如果是搜索内容，浏览器会使用默认引擎，合成一个带搜索关键字的新的URL地址如果用户输入的是一个URL地址，那么地址栏会根据规则，把这段内容加上协议，合成完整的URL。用户输入关键字并键入回车之后，浏览器开始进入资源请求状态URL请求过程当浏览器开始进行资源请求过程时首先，网络

2021-09-28 16:23:11 161

原创 js最大安全数

我们会发现一个问题当后台返回一个数过大时，返回数据和预览数据不同原因：这是因为后台返回的数据默认会使用JSON.parse转换，当数据过大时JSON.parse转换会有误差原因：js的类型Number类型最大为2的53次方，超过了这个数之后他的转换和运算是不安全的解决方案：下载插件：json-bigint npm i json-bigint使用方式：在axios 响应拦截器中，不适用JSON.pare转换，使用JSONbig转换var JS...

2021-09-16 14:43:27 514

原创 flex布局

文章目录修改主轴方向：flex-direction主轴对其方式：justify-content侧轴对其方式：align-items是否换行：flex-wrap权重属性：orderflex-growflex-shrinkflex-basisflexalign-selfflex是一种布局方式，如果想要实现如下布局样式，可以使用position、和float。但是简单快捷属flex布局，修改主轴方向：flex-direction因为flex有两条轴，一条主轴一条侧轴，侧轴垂直于主轴。盒子默认沿主轴排放。f

2021-08-19 17:19:09 94

原创文字过长显示tooltip

前几天遇到一个问题，就是文字过长显示tooltip，但如果没有超过部分不展示<el-tooltip class="item" effect="dark" content="title" placement="top" :disabled="title.length> 12"> <span>{{title.lenght>12?"title.slice(0, 12) + '...'":"title"}}</span> </el-tool

2021-08-19 14:09:26 2884

weixin_47909202的博客