- 博客(31)
- 收藏
- 关注
RSS订阅原创 Vue3 用 Proxy API 替代 defineProperty API 的那些事
只能遍历对象属性进行劫持return})Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的= null) {return obj// Proxy相当于在对象外层加拦截console.log(`获取${key}:${res}`)return res},console.log(`设置${key}:${value}`)return res},console.log(`删除${key}:${res}`)return res})Proxy。
2023-12-13 18:38:21
589
原创 Vue3 中的 Proxy--读懂ES6中的Proxy
Proxy用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）
2023-12-13 14:17:51
1423
原创 移动端的上拉加载，下拉刷新
下拉刷新和上拉加载这两种交互方式通常出现在移动端中。开源社区也有很多优秀的解决方案，如iscroll库等等，这些第三方库使用起来非常便捷。我们本次通过原生JS的方式实现一次上拉加载，下拉刷新，有助于我们对该技术点更好的理解与支持。
2023-07-20 09:51:35
597
原创 React中的Fiber架构
为了解决这个问题，React引入了Fiber架构。Fiber架构使得React能够将渲染过程拆分成多个小任务，每个小任务只执行一小部分工作，然后将控制权交回给主线程，这样就允许了主线程在执行每个小任务之间处理其他任务，比如响应用户交互。通过这种方式，React能够更加灵活地处理任务优先级，提高页面的响应性，减少卡顿的情况。所以，React Fiber的引入显著改善了React应用的性能和用户体验。
2023-07-19 17:04:43
2283
原创 axios源码分析
发送请求主要分为axios.get\post...axios({options})等实现方式，实现入口文件为。最终它们会拼接上一个叫。，各种请求方式的调用实现都是在。内部实现的， 简单看下。到拦截器中，响应拦截器是被。
2023-07-06 17:50:50
1821
原创 Vue中的Keep-alive
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们keep-alive可以设置以下propsinclude- 字符串或正则表达式。只有名称匹配的组件会被缓存exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存max- 数字。最多可以缓存多少组件实例关于keep-alive使用includes和exclude匹配首先检查组件自身的name选项，如果name。
2023-07-06 16:30:31
3351
原创 Vue中的$nextTick的作用详解
我们首先看看官方的定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。也就是说Vue在更新DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。
2023-07-06 16:20:08
1833
原创 Vue2实例挂载时做了什么？(源码解读)
new Vue的时候调用会调用_init方法定义$set$get$delete$watch等方法定义$on$off$emit$off等事件定义_update$destroy生命周期调用$mount进行页面的挂载挂载的时候主要是通过方法定义更新函数执行render生成虚拟DOM_update将虚拟DOM生成真实DOM结构，并且渲染到页面中。
2023-07-06 09:46:06
1848
原创 Vue3中如何使用Vuex---自定义hook
在Web实际开发中，我们经常会使用 vuex 来管理数据，随着数据量的增加，我们开始使用 vuex 中的语法糖，如 mapState、mapGetters、mapMutations 和 mapActions 等辅助函数来实现快速开发。但是Vue3中使用mapState、mapGetters这些辅助函数时会有些问题产生，本篇文章主要通过对比Vue2中vuex的使用以及分析vuex的源码，最后总结出Vue3中如何使用vuex。
2023-04-25 12:06:23
4895
2
原创 Vue中的methods配置项中的箭头函数this指向及相关源码分析
之前在使用Vue时遇到一个问题，我们知道在Vue的methods中定义函数时，要想使用到Vue实例或者组件实例的this时，我们就不能使用箭头函数定义方法，因为箭头函数中的this是在函数定义时生成的，并不是函数调用使用时生成。但是我们如果使用了箭头函数，那么其中的this指向哪里呢?我刚开始也是以为肯定是指向Window的,这仅仅是局限于用script映入vue.js时才会指向Window,但其实在Vue-cli中，如果使用箭头函数定义了methods中的方法，那么this是指向undefined的。
2023-04-15 17:33:17
7393
4
原创 Webpack5如何处理图片资源？
过去在 Webpack4 时，我们处理图片资源通过 `file-loader` 和 `url-loader` 进行处理。现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。
2023-04-15 10:03:18
5875
原创 什么是Webpack？如何使用？
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。webpack不做其他配置时，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。目前市面上最流量的是 Webpack，所以我们主要以 Webpack 来介绍使用打包工具。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。文件开始打包，不但会打包。
2023-01-14 14:36:30
6033
原创 [React] DOM的diffing算法
首先，我们知道React的特点之一就是：使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。其中React的实现如下：在数据更新后，React自动生成新的虚拟DOM，通过比较新、旧虚拟DOM，找出发生改变的虚拟DOM，将其转变为真实DOM，最终展现在页面上。因此，在进行组件遍历的时候需要加一个key来区分不同的标签，这里需要进行上图所述的虚拟DOM的diffing对比。
2023-01-14 14:10:36
5916
原创 React中类式组件的（新、旧）生命周期
我们在了解组React组件的生命周期前，我们先做如下理解：1.组件对像象从创建到死亡它会经历特定阶段。2.Ract组件对象包含一系列勾子函数（生命周期回调函数），在特定的时刻调用。3.我们在定义组件时，在特定的生命周期回调函数，中做特定的工作。React中类式组件的生命周期包括旧版本的旧生命周期，也有新版本的新生命周期，本节将从新、旧两种生命周期做详细讲解。
2022-12-20 20:51:25
6478
1
原创 TypeScript --- 变量类型（1)
any表示任意类型，一个变量设置了any类型后就相当于关闭了TS的类型检测，就无法使用 TypeScript 提供的大量的保护机制。请记住，any是魔鬼，使用了any和Js的变量书写就没有了区别。值得注意的是，方法没有返回值将得到undefined,但是我们需要定义成void类型，而不是undefined类型。在 TypeScript 中，任何类型都可以被归为 any 类型。never类型的值只能被never类型的值赋值，其他类型不能赋值给never类型；如果是any类型，则该变量允许被赋值为任意类型。
2022-11-11 12:17:12
7068
原创 TypeScript的基本使用
TypeScript简称TS,TS和JS之间的关系其实就是Less/Sass和CSS之间的关系,就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展,编写好的TS代码最终也会换成JS。TypeScript是JavaScript的超集，因为它扩展了JavaScript，有JavaScript没有的东西。最主要的是TS添加了类型检查，这是TS中最重要的特性。
2022-11-10 21:57:23
6494
原创 连续播放20分钟出现‘休息弹窗‘ 解决方案
在我们日常生活中，或许会需要面临在某些平台上进行视频记录时长的操作，但是某些平台在连续学习时长达到一定值时，会自动弹出弹窗导致无法学习
2022-10-27 16:49:33
8134
2
原创 Cookie、Session、Token之间的区别到底在哪？
在了解三者之间的区别之前，我们首先得清楚什么是HTTP协议的无状态性。对Cookie、Session、Token的理解
2022-10-21 12:03:35
9482
3
原创 ES6-ES11新特性-最新版（三）
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。super ()虽然代表了父类 Father 的构造函数，但返回的是子类 Son 的实例，即 super 内部的 this 指的是 Son 的实例，因此 super() 在这里相当于 Father.prototype.constructor.call(this)。在子类的构造函数中必须调用super()函数，代表父类的构造函数。
2022-10-15 21:26:05
8291
1
原创 ES6-ES11新特性(迭代器,生成器)-最新版（二）
我们输出以上代码段定义的arr数据结构如下图，发现包含有Symbol类型的一个迭代器方法，其中标识为Symbol.iterator的预定义值，内部声明为Symbol.iterator = Symobl(Symbol.iterato),该方法调用返回一个迭代器对象，其中包含有next()方法，不断调用next()方法就可以遍历此数据结构。for...of遍历的是当前数据结构中的键值，而for...in遍历的是当前数据结构中的键名，包括设置原型中的方法，所有for...in一般是用来遍历对象的属性名的。....
2022-08-26 16:06:38
29504
原创 ES6-ES11新特性-最新版（一）
ES全称EcmaScript,是脚本语言的规范，我们前端开发者平常编写的JavaScript就是EcmaScript的一种实现，所以ES新特性其实就是指JavaScript的新特性。本文章涵盖的新特性教程，那我们为什么要学这些新特性呢？下面我们就开始学习吧！.........
2022-08-26 02:27:48
25533
原创 AJAX中的跨域(CORS) 问题 （更新于2023.02.04）
from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2022-08-20 17:03:19
14775
9
原创 一文读懂原型链 prototype和__proto__详解
先在自身属性/方法中查找，找到则返回。如果没有找到。就会沿着__proto__这条链去查找，找到也会返回。如果查到了原型链的尽头还是没有查找到，则返回undefined。2.因为在实例化对象查找属性或者方法时总是沿着__proto__隐式原型链查找，所以原型链又称作隐式原型链。3.原型链的作用查找对象的属性或者方法。httpshttpshttps。..............................
2022-07-24 15:21:10
33571
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人