学学学无止境-CSDN博客

原创 Vue基础知识的加深理解

1. 计算属性与方法的区别在vue模板渲染中，当为某个元素绑定方法时，那么模板每次渲染的时候，这个方法都会被执行一次，因为method没有缓存。不同的是，computed计算属性具缓存功能，即当你为元素绑定的是计算属性的时候，由于计算属性具有缓存功能，因此模板每次渲染的时候，不会重新去执行这个计算属性，而是找到这个计算属性的缓存之，当且计算属性依赖的属性发生变化的时候，才会重新去执行这个属性。1.1 计算属性的完整写法每一个计算属性都具有两个方法，get()与se...

2021-11-29 21:55:24 2747 8

原创如何在vue3+vite中优雅的使用iconify图标

1.在src/assets目录下新增svg/目录（这步可以按照自身习惯），我们可以按照iconify的方式，按照模块在svg/下建不同的文件夹，这些文件夹用来存放我们自定义的svg图标文件。上面是我建立的几个目录，接下来我们来配置自定义图标的加载。优点：1.配置简单，使用方便，大量的图标可供选中2.使用的svg方式，体积小缺点：1.在.vue文件中可以很舒服的使用，但是在js、ts文件例如我们定义的路由菜单栏图标，不能实现自动引入，只能使用import的方式使用，目前我也还没想到比较好的的方式。

2024-04-26 16:13:10 1603

原创如何封装Vue组件并上传到npm

该文组件封装的方式其实是打包发布的方式，这种方式是将装好的组件最终打包成一个或者多个js文件发布。这种方式使得开发和调试时更接近于一个前端项目。但是一旦引入图片等静态资源需要同个BASE64的方式打包到js，而对于字体一类较大的静态资源则根本无法引用适用范围：没有或极少的依赖第三方插件、图片的组件的封装或JS方法的封装打包发布非打包发布webpack需要配置无需配置发布发布前需要打包发布前无需打包引用静态文件较小的图片可以通过BASE64方式打包仅js文件随意使用引用第三方依赖。

2024-04-18 16:28:43 978

原创 JavaScript中的继承方式详细解析

继承是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，那么就可以把这个B称为A的子类，而把A称为B的父类，也可以称为A是B的超类。继承的优点：继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码，在子类别继承父类的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获取与父类不同的功能。虽然JavaScript并不是真正的面向对象语言，但是它天生的灵活性，使应用场景更加丰富。

2024-03-18 16:25:07 922

原创 mavon-editor实现支持md格式输入并自定义工具栏

起源于我在做机器人报警推送的一个模块时，涉及到可以自定义报警的内容，其中内容支持md格式，同时还支持用户在指定光标处插入指定的字符串占位符。于是我在项目中引入mavon-editor库(支持Vue2、Vue3)，以支持用户输入md格式。然后接下来我讲到的是我用到的。

2024-03-12 11:33:11 677

原创关于我在项目中封装的一些自定义指令

在Vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统。我们看到的v-来头的行内属性，都是指令，不同的指令可以完成或者实现不同的功能。除了核心功能默认内置的指令（v-model和v-show），Vue也允许注册自定义指令。

2024-03-06 21:37:01 990

原创源码的角度分析Vue2数据双向绑定原理

我们都知道Vue是数据双向绑定的框架，双向绑定由三个重要部分组成Model：应用数据以及业务逻辑View：应用视图，各类UI组件ViewModel：框架封装的核心，它负责将数据与视图关联起来上面这个分层的架构方案，即是我们经常耳熟能详的MVVM，他的控制层的核心功能便是“数据双向绑定”

2024-02-29 18:44:25 962

原创动态给vue的data添加新属性页面不更新的原因分析以及解决方法

我们从一个例子触发定义一个p标签，通过v-for指令进行遍历，然后通过绑定事件，触发事件的时候，将动态添加哟个属性。预期结果：动态增加的属性也被遍历显示在页面上实力化一个vue实力，定义data属性喝methods方法点击按钮，发现结果不及预期，数据虽然也更新了(console打印出了新属性），但是页面并没有更新。

2024-02-28 19:37:11 608

原创 SPA首屏加载速度慢的怎么解决？

首屏时间，指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视图需要的内容。首屏加载可以说是用户体验中最重要的环节。

2024-02-28 19:11:15 1002

原创 H5控制设备以及数据回显方案设计(物联网）

我们都知道，我们当前开发的模式是使用Hybird App即原生+H5开发模式。H5在开发相关得设备页面的时候，关于对设备的控制数据的流向，往往只需要关注上述图中原生IOS | Android 实时监控数据，然后根据指定的协议向H5转发的过程，最后H5在设计相关的程序实现数据更新与否的一个回显问题。上述数据的流向有时并不是顺通无阻的，可能会因为网络问题，设备恢复延时又或者某一端的程序有问题导致数据不能正常按上述流程走。客户端作为用户体验最密切的一段，即不管是原生还是H5都需要对这个异常情况进行处理。

2024-02-26 14:22:07 41

原创 Vant轮播多个div结合二维数组的运用

在开发H5的时候，结合Vant组件的轮播组件Swipe实现如下功能。这里的需求是要实现每屏展示多张图片或者说多个div卡片，那么这个时候就要考虑到多维数组嵌套循环，也就是两层循环。

2024-02-22 11:21:30 731

原创前端下载文件流，设置返回值类型responseType:‘blob‘无效的问题

本是一个非常简单的请求，即是下载文件。通常的做法如下：1.前端通过Vue Axios向后端请求，同时在请求中设置响应体为Blob格式。2.后端相应前端的请求，同时返回Blob格式的文件给到前端（如果没有步骤1设置响应体，则后端返回的是一个文件流，前端）3.前端创建a标签进行下载如果后端返回的是文件的地址，那么前端可以直接通过加文件路径即可下载文件。但是如果后台返回的是文件流，那么前端就需要做一些处理。处理的核心也是将文件流转成文件，然后使用a标签模拟点击下载。

2024-01-16 10:52:02 3631 4

原创关于Vue中computed属性中传递参数

computed是Vue实例中一个非常强大的计算属性，它的值主要根据依赖数据而变化。我们可以将一些简单的计算放在computed属性中，从而实现在模板中使用简单的表达式。但是实际项目中通常有这么一个场景：根据传递不一样的参数值经过不同的计算得到不一样的结果。虽然这种场景我们使用吗，methods同样可以实现效果，但是我们知道，计算属性computed是基于它们的响应式依赖进行缓存的。只有在相关响应式依赖发生改变时它们才会出重新计算。

2023-11-19 17:58:08 1120

原创 a标签下载文件与解决浏览器默认打开某些格式文件的问题

a>元素（或称锚元素），可以通过它的href属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或者其他URL的超链接。

2023-11-19 17:21:33 1337

原创 Hybrid App（原生+H5）开发

国内推出的JavaScript bridge跨平台混合开发框架官方提供了Android/ios版本，真正实现跨平台DSBridge支持同步及异步调用（DSbridge是唯一一个支持同步调用的javascript bridge）无需iFrame，性能好Github地址混合开发的一个主要流程：1.根据需求规划，哪些业务是H5负责，哪些是原生端负责2.定制一份约束双端的协议以用来对应方法的一一对应性（什么方法做什么事，参数、方法名、同步异步）

2023-11-04 22:24:51 1420

原创《TypeScript》系列之对比JavaScript，TypeScript的优势

TypeScript是微软公司开发的一种基于JavaScript语言的编程语言，它的目的并不是创造一种全新的语言，而是增强JavaScript的功能，使其更适合多人合作的企业级项目。TypeScript可以看做是JavaScript的超集，即它继承了后者的全部语法，所有的JavaScript脚本都可以当做TypeScript脚本（有可能报错），此外它再增加了一些自己的语法。TypeScript对JavaScript添加的最主要部分，就是一个独立的类型系统。

2023-10-15 17:56:12 226

原创 Node.js初体验

fs模块是node.js官方提供的，用来操作文件的模块，它提供了一系列的方法和属性，来满足用户对文件的操作需求例如：1.fs.readFile()方法，用来读取指定文件的内容2.fs.writeFile()方法，用来向指定文件中写入内容如果要在JavaScript代码中，使用fs模块来操作文件，则需要使用如下的方式先导入它：疑问：只要我们安装了node.js，那么这边fs模块就是内置的，可以直接引入使用。

2023-10-15 16:01:26 612

原创关于Vue+webpack之H5打包优化，说说我的一些心得体会

基于公司的业务以及今年接触到的项目大部分都是APP混合开发，即原生Android/ios +H5页面开发APP。项目从产品需求的评审到方案的评审再到开发提测...这一套流程下来让我收货颇多。总想找个时间好好记录一番，大概还是自己懒惰了，一直拖到现在。想记录的东西太多了，一次讲完也没有突出的重点，我今天最想记录的是关于H5资源打包优化的问题。以前常常看到一些大V长篇大论的在讲各种优化问题，自己没有真正动手去实践过的话也不明所以，也不明白优化的重要性。

2023-10-15 12:39:11 1014

原创谈谈前端的本地存储indexedDB

IndexedDB 是一个用于在浏览器中存储大量数据结构的Web API，是浏览器提供的本地数据库，可以被网页脚本创建和操作，允许存储大量数据，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象），提供查找接口，能建立索引。且IndexedDB 不同于其他SQL的关系型数据库，IndexedDB 是一个事务型的数据库系统，会将数据集作为个体对象存储，数据形式使用的是JSON，而不是列数固定的表格来存储数据的。

2023-09-13 18:01:24 762

原创 ES6中Null判断运算符(??)正确打开方式-

上面的代码中，如果response.setting时null或者undefined，或者response.setting.value是null或者undefined，就会返回默认值300。上面的三行代码都是通过||运算符指定默认值，但是这样写是错的。我们这样写的意愿一般是，只要属性的值为null或者undefined，默认值就会生效。读取对象属性的时候，如果某个属性的值是null或者undefined，有时候需要为它们指定默认值。现在的规则是，如果多个运算符一起使用，必须用括号表明优先级，否则会报错。

2023-08-09 17:28:49 919

原创 ES6链判断运算符(?.)的正确打开方式

在实际应用中，如果读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。上面的代码中，iterator.return如果有定义，就会调用该方法，否则iterator.return直接返回undefined，不再执行?上面代码中，字符串match()方法，如果没有发现匹配会返回null，如果发现匹配会返回一个数组，?上面的例子，firstName属性在对象的第四层，所以需要判断四次，每一层是否有值。，如果是的，就不再往下运算，而是返回undefined。运算符，直接在链式调用的时候判断，

2023-08-08 23:17:53 978

原创 JS中常用的数组拷贝技巧

我们都知道，数组也是属于对象，在JS中对象的存储方式则是引用的方式。我们想要拷贝一个数组，就不能只是变量之前的赋值拷贝，这样他们将共享同一个引用，而数组又具有可变性，所以无法将原数组和拷贝的数组的数据分隔开。那么接下来将介绍如何对数据进行深层拷贝，使得原数组和拷贝数组的数据分隔开来。

2023-08-06 16:00:58 1110

原创箭头函数中的this指向以及不适用箭头函数的场景

lives:9,上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面这样的箭头函数，使得this指向全局对象，因此不会得到预期结果。这是因为对象不够称单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。再看一个例子a:23,m:()=>{obj.m()上面例子中，obj.m()使用箭头函数定义。

2023-07-24 22:24:30 233

原创 qs库的使用

qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来可以将一个查询字符串解析成一个object，而且支持复杂的嵌套。在工作中，最经常使用qs的地方就是请求参数格式转换的时候，但是有次偶然发现，qs其实是一个很好用的库。在对一些数据的处理上，使用原生js可能会比较麻烦，但是在qs中已经封装了很多好用的方法。接着往下看吧~让我们在数据处理上，游刃有余~

2023-07-22 15:46:40 385

原创 Vue+Vant封装通用模态框单选框组件

title：标题showList：展示列表的数据actionVal：当前列表数据中被选中的值dialogType：弹框的类型（0-列表文字图标；1-列表文字 radio；2-自动以内容）onlyCancel：是否只显示取消按钮，true只显示取消按钮，false：既显示取消按钮，又显示确定按钮。因为有些是需要点击单选框某项之后直接关闭模态框触发回传事件，有些是需要点击确定按钮再触发，所以这里做了一个区分。

2023-04-22 22:00:32 2732 1

原创 Vue+H5如何适配各个移动端？

我们都知道，在做移动端的项目的时候，我们最首先的是要指定适配各种机型的方案，让一套代码能够在不同分辨率的机型下顺应自如。，相信你看完之后将会有很多收货！然后这篇文章主要是讲讲在实际运用上，且也是我在项目中使用的一种适配方案，感兴趣的小伙伴继续看下去吧~ps：若本文有写错或者遗漏的地方还望大家能够底下评论或者私信我，我们一起交流~

2023-04-05 12:00:02 3427

原创 Vue-cli脚手架在做些什么（源码角度分析）

什么是Vue脚手架？在学习初期，我们的项目往往需要借助webpack、vite等打包工具配置Vue的开发环境，但是在真实开发中我们不可能每个项目从头来完成所有的webpack配置，这样显得开发的效率会大大的降低；所有的真实开发中，我们通常会使用脚手架来创建一个项目，Vue项目我们使用的是Vue脚手架Vue cli已经内置了webpack相关的配置，我们不需要从零来配置

2023-02-24 16:11:34 542

原创从Vue2到Vue3，Vue3变了什么？

1 setup函数1.1 参数 setup(props,context)• props：父组件传递过来的属性• context：SetupContext，即是setup函数的上下文1.1.1 参数1 props如果想在setup函数中使用父组件传递过来的props，则是通过props这个参数获得。在Vue2中我们是可以同个this.props的形式获取props，但是在Vue3之后setup函数中不允许使用this，当然还有一个注意点是，你再setup函数接收父组件传递的props参数，但是在se

2023-01-07 17:50:47 963

原创 Vue+iview将表格table以excel文件导出的几种方式

前言在日常工作中，若是经常跟后台管理系统打交道的朋友想必对导出excel表格这种需求肯定很熟悉吧。不过我也问了身边的一些岗位为后端工程师的朋友，他们说在公司的话一般导出excel表格的工作一般由后端来做，前端只需要调用接口即可。我的话，由前端导出或者后端导出的两种方式我都有做过，以此想记录一下，总结一下我是如何针对不同的方式将表格数据以excel的格式导出的。同时呢，若文章中有不足的地方，也欢迎大家的指正，相互学习~后端导出如果你在工作中，导出excel表格这个工作主要放在后端的话，那么就会比较简单

2022-11-26 17:31:09 5030

原创 Vue中使用v-if多次切换相同模板问题

问题描述下面是使用两个相同结构的表单来记录不同角色的登录信息，这里首先使用了v-if进行切换，当条件为true的时候显示第一个表单，当条件为false的时候显示第二个表单，但是这也就暴露除了问题所在。我在第一个表单进行操作的时候，填入错误的信息的时候，这时候表单会出现校验不通过的错误提示吗，而我切换到第二个表单的时候，却发现第一个表单的错误提示自上而下的出现在我没有操作过的第二个表单上。

2022-11-20 19:00:49 925

原创一文搞懂《前后端动态路由权限》--后台控制篇

前言本文主要针对后台管理系统的权限问题，即不同权限对应着不同的路由，同时侧边栏的路由也需要根据权限的不同异步生成。我们知道，权限那肯定是对应用户的，那么就会涉及到用户登录模块，所以这里也简单说一下实现登录的和权限验证的思路。登录：当用户填写完账号和密码后向服务器验证是否正确，验证通过后服务端会返回一个token，拿到token之后，前端则会将token保存到本地并且保存到Vuex中(持久化，防止刷新丢失；另外你也可以保存到cookie中，用于记住用户的登录状态），接着前端会根据toke

2022-11-20 16:58:18 1573

原创冒泡事件在Vue中的应用

什么是事件冒泡？一想到“冒泡”这两个词会想到什么？想必然，那就是气泡自下而上的从水底往上生的场景，但是我们也知道，水在往上升的过程中，也会经历不同的高度。由此场景，那么想必然，冒泡的原理就可以很轻易的被理解啦。我们知道，我们平时缩写的所看到的页面，都是由文档流即DOM树组成的，那么当我们在一个时间出发某个时间的时候，这个事件就会像这个气泡一样，从DOM树的底层，逐步向上传递，一直到DOM的根节点。当然，这事件冒泡的过程中，需要注意的一个点事，只有子元素和父级元素都有绑定

2022-11-19 13:50:23 3476

原创站在源码的角度探究React中的状态state

1.类组件中的statesetState的用法React项目中UI改变来源于state的改变，类组件中setState是更新组件，渲染视图的主要方式基本用法

2022-11-13 19:39:08 1550

原创踏入前端的这两年

仍记得2020年10月27号那天，那天我在实验室403写下属于我的第一篇创作，即《CSS浮动float的导航栏小案例总结》，那也是我刚接触前端。当然，在那个时候，常规的操作就是熟悉前端三剑客啦，所以当时我也是从css开始学习。我这个人呢，始终遵循“好记性不如烂笔头与实操”，所以我便也是喜欢一边学习一边总结与记录着。因为每次在创作文章的时候，会把自己的思路完完全全的再捋一遍，从0到1，以及自己某些不注意的点而踩的坑，都会记录下来，慢慢的就会得到一份“可观”的收获。

2022-10-28 13:42:28 265 1

原创 React生命周期详解

前言react生命周期在各个阶段的执行顺序是有所差异的，接下来我们将详细解析react在各个阶段生命周期的执行顺序，以及各个生命周期在组件中充当的作用（以下生命周期指的是react16之后的版本）......

2022-08-31 16:42:44 15068 6

转载关于Vue与React的一些对比与总结（中）

在上篇文章中已经将Vue和React中的背景、核心思想、组织形式、数据管理(props、data VS state)、组件数据交互、class与style、生命周期、事件处理进行了对比与总结，那么这篇文章主要是对比总结Vue中与react中的条件渲染(v-if VS &&)、是否显示(v-show VS style+class)、列表渲染(v-for vs map)、计算属性(computed vs useMemo+useCallback)、watch vs render、ref、表单(v-...

2022-08-30 11:41:43 676

空空如也

空空如也