- 博客(54)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 在vue项目如何引入异步组件？
什么叫异步组件呢？在项目执行的时候不加载，在需要的时候才加载。比如说弹框啦。代码就不上啦 直接 写方法。//这样引入就是异步组件const List = () => import("./list")const Content = () => import("./content")compinents:{List,Content}...
2021-11-18 13:16:54
1003
原创 vue3.0 + TS ResizeObserver loop limit exceeded报错原因及解决方案
/ ResizeObserver loop limit exceeded报错原因及解决方案。放到 main.ts中。
2024-03-12 19:39:44
472
原创 vue 使用less全局变量
npm install sass-resources-loader --save-dev// vue.config.jsmodule.exports = { chainWebpack: config => { const oneOfsMap = config.module.rule('scss').oneOfs.store oneOfsMap.forEach(item => { item .use('sass-resources-load.
2022-01-19 10:37:52
614
原创 vue4.X 配置build打包不同环境不同域名的处理
1、package.json 里 修改 --mode 后面 是对应下面的 文件 buildtest 是执行 npm run buildtest"scripts": {"buildtest": "vue-cli-service build --mode test","build": "vue-cli-service build --mode prod",},2、这时需要创建 2个文件，说明一下，NODE_ENV 要配置为'production' 因为保持和线上打包hash一样，否则打出的
2022-01-11 10:43:58
763
原创 手写一个Promise.all方法
1、首先理解和使用Promise.allPromise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。具体代码如下：let p1 = new Promise((resolve, reject) => { resolve('成功了')})let p2 = new Promise((resolve, reject) => { reso.
2021-12-14 10:02:01
510
1
原创 vue的异步请求在哪一个生命周期发起？
这个在大家讨论的时候说放哪个的都有。其实在钩子函数 created、beforeMount、mounted 中进行异步请求都是可以的。因为在这三个钩子函数中，data已经创建，可以将服务器端返回的数据进行赋值。当然 如果异步请求不需要依赖 DOM 推荐加载 created 钩子函数中调用异步请求。因为在 created 钩子函数中调用异步请求有以下优点：能更快获取到服务端数据，减少页面loading时间； ssr 不支持 beforeMount、mounted 钩子函数，所以放在 crea
2021-12-07 09:34:09
1567
原创 微信小程序的版本更新机制是什么？
1）小程序的启动方式：冷启动----小程序首次打开或销毁后再次被打开热启动----小程序打开后，在一段时间内（目前：5分钟）再次被打开，此时会将后台的小程序切换到前台。2）根据以上两种启动方式，相应的更新机制为：小程序冷启动时，会检查小程序是否有最新版本。如果有则将异步下载最新版本，但是仍将运行当前版本等到下一次冷启动时再运行最新版本。如果你想现在就使用最新版本则需要调用wx.getUpdateManager API进行处理；3）关于wx.getUpdateManager实战
2021-12-07 09:28:03
1215
原创 Vue组件通讯有哪些方式？
1、props 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。4、父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。（官方不推荐在实际业务中适用，但是写组件库
2021-12-03 16:13:49
266
原创 Vue路由中的hash和history模式的区别及原理
hash模式优点兼容性强，兼容性达到了IE8 除发送ajax和资源请求外不会发送其他多余请求 改变#后的路径、不会自动刷新页面 无需服务端进行配合缺点访问路径上包含#,不美观 对于需要锚点功能的需求会与当前路由机制发生冲突 重定向操作时，后段无法获取url完整路径。history模式优点符合url地址规范, 不需要#, 使用起来比较美观 可以使用history.state获取完整的路由信息 后端可以获取到完整的路由信息缺点兼容性只到IE10 改变url路径后、会
2021-12-03 16:07:47
914
原创 computed与watch的区别及用法
computed:1、支持缓存，不支持异步，当computed内有异步操作时无效，无法监听数据的变化2、当一个属性受多个属性影响的时候就需要用到computed，最典型： 购物车商品结算的时候3、不用在data中声明变量。4、如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。watch：1、不支持缓存，支持异步，数据变，直接会触发相应的操作；2、当一
2021-12-03 15:56:05
1872
原创 前端工程化到底是什么？
前端工程本质上是软件工程的一种。软件工程化关注的是性能、稳定性、可用性、可维护性等方面，注重基本的开发效率、运行效率的同时，思考维护效率。一切以这些为目标的工作都是"前端工程化"。工程化是一种思想而不是某种技术。举例说明：要盖一栋大楼，假如我们不进行工程化的考量那就是一上来掂起瓦刀、砖块就开干，直到把大楼垒起来，这样做往往意味着中间会出现错误，要推倒重来或是盖好以后结构有问题但又不知道出现在哪谁的责任甚至会在某一天轰然倒塌，那我们如果用工程化的思想去做，就会先画图纸、确定结构、确定用料和预算以及工期，另
2021-12-03 11:37:49
267
原创 关于小程序兼容的问题
1、由于按钮固定定位在底部，在一些iPhone X以上的屏幕，底下会有一条线，由此，我们需要解决其问题方案如下: 监听当前手机型号，判断是否为刘海屏幕2、小程序ios端的margin-bottom无效。解决办法：用padding-bottom替换。3、小程序ios端的日期为NaN-NaN... 原因：一般日期为"2020-08-08 08:08:08"格式，ios日期只支持"2020/08/08 08:08:08" 解决办法：运用正则转为需要的ios兼容的格式4、ios下的zI
2021-12-02 10:36:51
1911
原创 TCP和UDP的区别
TCP的优点： 可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有确认、窗口、重传、拥塞控制机制，在数据传完后，还会断开连接用来节约系统资源。 TCP的缺点： 慢，效率低，占用系统资源高，易被攻击 TCP在传递数据之前，要先建连接，这会消耗时间，而且在数据传递时，确认机制、重传机制、拥塞控制机制等都会消耗大量的时间，而且要在每台设备上维护所有的传输连接，事实上，每个连接都会占用系统的CPU、内存等硬件资源。 而且，因为TCP有确认机制、三次握手机制，这些也导致T
2021-12-02 09:11:58
241
原创 理解HTML语义化
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等> 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看； 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用； 有利于SEO：和搜索引擎建立良
2021-11-26 15:09:39
72
原创 websocket和ajax的区别是什么，websocket的应用场景有哪些
WebSocket的诞生本质上就是为了解决HTTP协议本身的单向性问题：请求必须由客户端向服务端发起，然后服务端进行响应。这个Request-Response的关系是无法改变的。对于一般的网页浏览和访问当然没问题，一旦我们需要服务端主动向客户端发送消息时就麻烦了，因为此前的TCP连接已经释放，根本找不到客户端在哪。为了能及时从服务器获取数据，程序员们煞费苦心研究出来的各种解决方案其实都是在HTTP框架下做的妥协，没法子，浏览器这东西只支持HTTP，我们有什么办法。所以大家要么定时去轮询，要么就靠长连接—
2021-11-24 15:06:23
192
原创 线程与进程的区别
1. 一个程序至少有一个进程,一个进程至少有一个线程2. 线程的划分尺度小于进程，使得多线程程序的并发性高3. 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率4. 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制5. 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看.
2021-11-24 11:11:28
71
原创 哪些地方会出现css阻塞，哪些地方会出现js阻塞？
js 的阻塞特性：所有浏览器在下载 JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载 JS，但是 JS 下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。由于浏览器为了防止出现 JS 修改 DOM 树，需要重新构建 DOM 树的情况，所以就会阻塞其他的下载和呈现。嵌入 JS 会阻塞所有内容的呈现，而外部 JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后
2021-11-23 16:48:34
222
原创 什么是JavaScript 的同源策略？
概念：同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。为什么要有同源限制：我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中in
2021-11-23 16:45:48
1185
原创 什么叫优雅降级和渐进增强？
1. 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。2. 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。...
2021-11-23 16:41:56
149
原创 你所知道的http的响应码及含义？
1xx(临时响应)100: 请求者应当继续提出请求。101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进行切换。2xx(成功)200：正确的请求返回正确的结果201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。3xx(已重定向)300：请求成功，但结果有多种选择。301：请求成功，但是资源被永久转移。303：使用 GET
2021-11-23 14:33:28
256
原创 如何提高webpack的构建速度？
多入口情况下，使用CommonsChunkPlugin来提取公共代码 通过externals配置来提取常用库 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。 使用Happypack实现多线程加速编译 使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify.
2021-11-23 13:47:03
490
原创 如何利用webpack来优化前端性能？
用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css 利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修
2021-11-23 13:46:31
581
原创 webpack的构建流程是什么?
Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数； 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译； 确定入口：根据配置中的 entry 找出所有的入口文件； 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理； 完成模块编译：
2021-11-23 13:44:09
301
原创 webpack与grunt、gulp的不同？
三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件
2021-11-23 13:43:33
445
原创 VUE双向数据绑定原理
VUE双向数据绑定原理1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；3.介绍一下Object.defineProperty()方法（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象
2021-11-22 10:44:08
231
原创 VUE生命周期详解
1、创建前(beforeCreate)对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。2、创建后（created）对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。3、载入前（beforeMount）对应的钩子函数是beforeMount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建， 下面vue对DOM的操作将围绕这个根元素继续进行；beforeM
2021-11-22 10:29:32
507
原创 使用vue渲染大量数据时应该怎么优化？
Object.freeze适合一些 big data的业务场景。尤其是做管理后台的时候，经常会有一些超大数据量的 table，或者一个含有 n 多数据的图表，这种数据量很大的东西使用起来最明显的感受就是卡。但其实很多时候其实这些数据其实并不需要响应式变化，这时候你就可以使用 Object.freeze 方法了，它可以冻结一个对象(注意它不并是 vue 特有的 api)。当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Objec
2021-11-19 14:30:44
3027
原创 在vue文件中style是必须的吗？那script是必须的吗？为什么？
template是必须的，而script与style都不是必须的如果没有 template，则 [Vue warn]: Failed to mount component: template or render function not defined.
2021-11-19 14:21:14
770
原创 vue的性能优化
1、代码模块化，咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。2、for循环设置key值，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。3、Vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。4
2021-11-19 13:46:15
4815
原创 http的三次握手和四次挥手
浏览器在给服，务器传输数据之前，有三次握手，握手成功之后，才可以传输数据1、浏览器需要先发送SYN码，客户端请求和服务器建立连接；2、服务器接收到SYN码，再发送给客户端SYN+ACK码，我可以建立连接；3、客户端接收到ACK码，验证这个ACK是否正确，如果正确则客户端和服务端则建立起数据连接；双方的数据发送通道都将开启；四次挥手：1、当客户端无数据要传输了，会发送FIN码告诉服务器，我发送完毕了；2、当服务端接收完毕后，告诉客户端ACK码，告诉客户端你可以把数据通道关闭了；
2021-11-18 15:49:56
347
原创 当我们在浏览器输入url，到请求成功后展现出完整的网页，浏览器都做了些什么？
http事务：从浏览器传给服务器，服务器反回内容给浏览器，这一个完整的过程就叫做http的一个事务。1、http请求阶段：1）浏览器把url发送给DNS服务器；2）DNS服务器会根据IP找到对应的服务器；3）服务器接收到请求，客户端和服务器已经产生了连接；2、http响应阶段：4）服务器接收到请求后，根据路径，找到相应的项目；5）服务器找到之后，服务器立即把一些响应信息放在响应头中，通过http发送给客户端，同时进行数据整理；6）把整理出来的数据，通过http发送给客户端
2021-11-18 14:54:47
523
原创 npm创建自己的包及发布
1、npm init基本的配置 自己填下想要快速完成 npm init -y-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json2、在目录里新建一个入口文件 index.js这里写一个简单的domindex.js 里输入以下================================================================function getName(name) { ret...
2021-11-18 10:23:00
132
原创 小程序 获取 模块 属性 （高、宽、滚动高度）方法
let query = wx.createSelectorQuery();let contentBoxH = query.select(".content_box").boundingClientRect();query.exec(res => {let contentBoxH = res[0] ? res[0].height : 0;})
2020-08-03 09:26:38
308
原创 监听事件里使用promise async await
//监听鼠标点击事件this.map.on('click',function(e){(asyncfunction(){ letaddress=awaitthat.that.regeoCode()() console.log(address,that.clickLnglat) }())})...
2020-05-14 00:00:29
1047
原创 vsc window里 vue 注释快捷键问题。
vscode 插件超市中所有关于VUE的插件都用了，到是找到一个一劳永逸的方法：1.安装Vue 2 Snippets插件2.在settings.json中加入这个："files.associations": {"*.vue": "html"}...
2020-05-06 14:37:05
987
1
原创 vue 打印功能 vue-print-nb
1、安装 npm installvue-print-nb --save2、在main导入并注册： import Print from 'vue-print-nb' Vue.use(Print)3、使用：<div id="printDiv">打印的内容</div><button v-print="'#printDiv'">...
2020-04-26 13:20:14
3804
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人