- 博客(48)
- 收藏
- 关注
RSS订阅
原创 Vue3中的组件的name名
在Vue2和Vue3中，`name`选项的作用是一样的，都是用来给组件命名。它们都可以在开发者工具的调试时追踪组件层级，并且在一些插件和库中可能会使用到组件的名称。然而，在上述代码示例中，Vue2和Vue3的写法有所不同。在Vue2中，`name`属性直接定义在组件的导出对象中。而在Vue3中，通过`<script setup>`语法，我们可以在同一个`<script>`标签中同时编写组件的选项和逻辑。所以，尽管Vue2和Vue3中的`name`选项的作用是一样的，但是在写法上存在一些差异。
2024-01-11 16:19:27
1334
原创 Postman汉化教程
Postman是一款支持http协议的接口调试与测试工具，其主要特点就是功能强大，使用简单且易用性好。无论是开发人员进行接口调试，还是测试人员做接口测试，postman都是我们的首选工具之一。点击此跳转如果连接不管用可以扫下面码。先去GitHub下载 汉化补丁 👉👉👉点此跳转下载后找到安装的Postman位置，看下图：在app-9.12.2下的resources里面，把下载好的汉化补丁解压，然后重启一下应用就好了。
2023-11-09 14:48:01
2554
3
原创 代码封装的11种方式。
模块封装（ module ）：模块是一组相关的函数、对象或类的集合，用于实现模块化的代码组织，目前主要用过CommonJS和ES6 Module来实现的。组件封装（ component ）：组件是指一组相关的UI元素和交互行为的集合，可以复用在多个页面或应用程序中，常用于Vue和React等框架中。混入封装（ mixin ）：混入是Vue2.x中的一个特性，用于将对各组件之间共用的逻辑抽离出来，提高代码的复用性和可维护性。
2023-10-17 10:49:12
832
原创 Vue3路由引入报错解决：无法找到模块“xxx.vue”的声明文件 xxx隐式拥有 “any“ 类型。
解决方法：在项目的根目录或者src文件夹下创建一个后辍为。这类情况应该遇见过吧，这是因为。这样代码行的报错就没有了。
2023-10-12 18:19:53
3715
原创 Vue3模块找不到问题解决：找不到模块‘vue ‘。你的意思是将“模块解决方案”选项设置为“节点”，还是添加ali
Vue3 + vite 项目引入 vue 报错
2023-10-12 16:33:26
2328
原创 说说webpack中代码分割如何实现？
选项进行配置，可以实现代码分割。该选项可以指定哪些模块应该进行代码分割，以及如何命名分割后的文件。函数动态地导入模块，webpack会根据这些动态导入语句自动进行代码分割。配置选项：通过在webpack配置文件中的。：在早期版本的webpack中，可以使用。
2023-08-24 22:08:23
302
原创 说说如何借助webpack来优化前端性能？
terser是一个JavaScript的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让bundle更小在production模式下，webpack 默认就是使用 TerserPlugin 来处理我们的代码的。...parallel: true // 电脑cpu核数-1})属性介绍如下：1、extractComments：默认值为true，表示会将注释抽取到一个单独的文件中，开发阶段，我们可设置为 false ，不保留注释。
2023-08-24 22:05:01
1005
原创 什么是强缓存和协商缓存
强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。
2023-08-24 21:47:58
1742
原创 Redux中间件理解，常见的中间件，实现原理。
redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。通俗来说，redux中间件就是对dispatch的功能做了扩展。
2023-08-24 21:27:31
1407
原创 React Diff算法
将virtualDOM（虚拟DOM）转换成actualDOM（真实DOM）的最少操作过程就叫调和，简单理解就是简化算法复杂度。提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
2023-08-24 20:46:37
1208
原创 React生命周期（新-旧）
① 是什么？组件从创建到挂载页面上运行，再到组件不用时卸载的过程，叫生命周期，只有类组件才有生命周期。②作用学习组件的生命周期，有助于理解组件的运行方式，完成更复杂的组件更能、分析组件错误原因等。① 是什么？生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。②作用为开发人员在不同阶段操作组件提供了时机。
2023-08-24 18:41:34
193
原创 【无标题】
虚拟DOM计算过程中，diff算法来比较新旧虚拟DOM的差异的，diff算法会遍历新旧DOM的节点，超出需要更新的节点，这个过程中每个节点需要有一个唯一key属性，用来表示节点的身份，key属性可以帮助react更近准的找到需要跟新的节点，来提高效率。结果都是false，在js中队的比较是通过引用地址来进行的，两个不同的数组或对象在内存中的引用地址不同，所以它们是不相等的。子传父：在父组件中定义一个回调函数，将回调函数传递给子组件，子组件通过调用传递的回调函数，回调函数的返回值就是子组件传递的数据。
2023-08-18 22:12:09
82
原创 React中的props和state的理解
我们既然要创建组件，那么就必然需要定义一个能代表一个组件UI呈现的完整状态集，也就是说：组件对应UI的任何改变，都可以从 state 的变化中反映出来；同时，state 还必须是代表一个组件UI呈现的最小状态集，即 state 中的所有状态都是用于反映组件UI的变化，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态。⚠️ 并不是组件中用到的所有变量都是组件的状态！当存在多个组件共同依赖同一个状态时，一般的做法是状态上移，将这个状态放到这几个组件的公共父组件中。
2023-08-18 21:39:14
92
原创 props和state相同点和不同点？render方法在哪些情况下会执行？
Props和State都是用于存储和管理组件的数据，但Props是父组件传递给子组件的数据，是只读的，而State是组件内部自身管理的数据，可以被组件自身修改和更新。
2023-08-18 17:04:18
40
原创 React性能优化的8种方式
react凭借和diff算法拥有高效的性能，除此之外也有很多其他的方法和技巧可以进一步提升react性能。一下几中方法有助于提升react性能，虽然不必一定要在项目中使用这些方法，但是我们有应该知道如何使用这些方法。
2023-08-18 15:14:52
870
原创 防抖和节流。
防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内的触发次数.减少触发频率提高性能或者说避免资源浪费。防抖 （多次触发 只执行最后一次节流 （规定时间内 只触发一次防抖：（1）防抖：防抖的含义是指在一定的时间内，多次触发同一个事件，只执行最后一次操作。比如：当我们搜索框中输入关键字或词时，输入框不断触发oninput事件，如果每次输入都去请求服务器获取数据，会造成不必要的请求浪费。
2023-08-14 15:54:30
84
原创 【无标题】
React基于浏览器呢自身实现了一套事件机制，包括事件注册、事件冒泡、事件合成、事件派发等，在react中这套事件被称为合成事件，合成事件是react模拟原生DOM事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器根据W3C规范来定义合成时间，兼容所有浏览器，拥有与浏览器原生事件相同的接口。虚拟DOM是一个轻量级的js对象，是真实DOM的抽象，虚拟DOM是在内存中进行操作，然后再和真实DOM进行对比，把需要跟新的渲染上，可以大大减少直接对真实DOM的操作提高性能。
2023-08-14 09:35:01
85
原创 什么是内存泄漏。
当一个对象创建时，系统会为其分配一块内存空间，当对象不再被使用时，应该及时释放内存空间，以便其他对象可以使用。然而，如果程序中存在内存泄漏的情况，对象的内存空间没有被释放，就会导致内存的浪费和不足就叫内存泄漏。② 引用计数：这是一种简单的垃圾回收算法，它通过计算对象的引用数量来确定对象是否可以被回收。然而，引用计数算法无法处理循环引用的情况，因为循环引用的对象的引用数量永远不会变为0.如果闭包持有对外部函数的一些变量的引用，并且这些变量是大型的对象或者函数，那么这些外部变量将无法被垃圾回收器释放。
2023-08-14 09:27:41
39
原创 React性能优化的手段有哪些？
3、使用shouldComponentUpdate或React.memo：使用shouldComponentUpdate方法或React.memo函数来避免不必要的组件渲染，只有在props或state发生改变时才会重新渲染组件。5、使用PureComponent或React.memo：使用PureComponent类或React.memo函数来避免不要的组件渲染，只有在props或state发生改变时才会重新渲染组件。
2023-08-10 21:39:00
175
原创 扩展运算符都有哪些作用
无论是操作数组、对象还是字符串，扩展运算符都是一种使用的工具。扩展运算符是在ES6中引入的一种语法，它用于展开数组、对象或字符串。1、展开数组：使用扩展运算符可以将一个数组展开为多个独立的元素。2、合并对象：扩展运算符可以将多个对象合并为一个新对象。4、克隆对象：使用扩展运算符可以快速地克隆一个对象，得到一个与原对象相同地新对象。3、函数调用：扩展运算符可以用于函数调用，将一个数组展开为多个参数传递给函数。5、字符串拼接：扩展运算符可以将一个字符串拆分为单个字符，并将其作为数组元素。
2023-08-09 21:33:19
103
原创 Redux实现原理
3、动作Action：为了修改状态，我们需要使用特殊的对象， 称之为‘action’,Action是一个简单的JavaScript对象，它描述了发生的事件以及将要对状态进行的修改。每次应用程序状态发生变化时，Redux会返回一个全新的状态对象，而不是修改原始状态对象。4、更新器Reducer：Reducer是一个纯函数，它接收当前的状态state和action作为参数，并返回一个新的状态。1、单一数据源：Redux的核心思想是将整个应用的状态存储在一个单一的JavaScript对象中，称为‘stire’。
2023-08-09 21:19:23
196
原创 git操作命令
git commit -m ""`：将暂存区的文件提交到本地仓库，并添加提交信息。git rebase `：将当前分支的更改移动到目标分支之后。git remote add `：添加一个远程仓库。git merge `：将指定分支的更改合并到当前分支。git fetch`：从远程仓库下载最新的提交，但不合并到当前分支。git mv `：移动或重命名文件。git push`：将本地仓库的提交推送到远程仓库。
2023-08-08 21:03:08
26
原创 你对自定义hook的理解，模拟简易版的useState
在上面的代码中，我们导入了 React 的 useState Hook，并创建了一个名为 `useCustomState` 的自定义 Hook。该 Hook 接受一个初始值作为参数，并返回一个包含两个元素的数组：状态值和更新状态的函数。在上面的代码中，我们使用 `useCustomState` 自定义 Hook 来创建了一个名为 `count` 的状态变量，并通过 `setCount` 函数来更新它。通过自定义 Hook，你可以将组件内部的状态逻辑提取出来，使得代码更加可重用和易于理解。
2023-08-08 20:58:43
63
原创 封装一个使用递归方式的深拷贝方法deeoClone
需要注意的是，在 JavaScript 中使用递归方式进行深拷贝时，可能会遇到环状引用的情况（即对象属性之间相互引用，形成一个环）。为了避免进入无限递归的情况，你可以在代码中添加额外的处理逻辑来跟踪已经拷贝过的对象，或者使用第三方库（如Lodash中的_.cloneDeep方法）来处理深拷贝。接着，我们修改了拷贝后的对象 clone 的一些属性值，并验证了原始对象 original 不受影响。当我们需要对一个对象进行深拷贝时，可以使用递归方式遍历对象的属性，并对每个属性进行拷贝。
2023-08-07 21:26:14
105
原创 面向对象编程的方式理解
面向对象编程是一种程序设计范式，它将程序的结构组织成一个个互相独立具有特定功能的对象，对象之间通过消息传递来进行交互和协作，在面向对象编程中，对象是程序的基本构建块，每个对象都有自己的状态和行为。4、继承(Inheritance)：继承是指一个类可以从另一个类继承属性和方法，从而可以扩展已有的类，减少代码的重复和提高代码的可复用性。3、封装(Encapsulation)：封装将数据和操作方法封装在一个对象中，外部只能通过对象的接口来访问和操作数据，隐藏了内部的细节。类可以看作是对象的模板或蓝图。
2023-08-07 21:10:01
23
原创 事件循环的理解，以及应用理解。
避免阻塞：JavaScript 是单线程的，如果有大量的同步代码需要执行，将会阻塞事件循环，导致用户界面失去响应。2、处理微任务：：检查微任务队列，如果有任务，则按照先进先出的原则执行队列中的微任务。3、处理宏任务：检查宏任务队列，如果有任务，则去取出队列中的第一个任务，放入调用栈中执行。异步操作：通过事件循环，可以执行异步操作，如异步请求数据、定时器等。处理异步结果：事件循环中的微任务队列可以方便地处理异步操作的结果，例如使用 Promise 进行异步操作，并通过。
2023-08-06 20:50:36
43
原创 js类型检验的方式。
4、Onject.prototype.toString方法：可以使用Object.prototype.toString方法来获取一个值的内部[[Class]]属性，从而检查其类型。3、constructor属性：所有对象都有一个constructor属性，它指向创建该对象的构造函数。可以使用constructor属性来检查一个对象的类型。2、instanceof操作符：可以使用instanceof操作符来检查一个对象是否是某个类的实例。1、typeof操作符：可以使用typeof操作符来检查一个值的类型。
2023-08-06 20:41:52
30
原创 闭包的理解
3、实现模块化：通过闭包，可以将一些相关的函数和变量组合成一个完整的模块，提供外部接口，隐藏内部实现细节，增加代码的可读行和可复用性。2、延长变量的生命周期:闭包可以使函数内部的变量在函数执行完后仍然存在，可以在函数外部访问和使用这些变量。1、数据的封装：闭包可以将变量私有化，只在函数内部使用，避免了全局变量的污染，增加了代码的可维护性。3、延长变量的生命周期：可以使用闭包保存函数内部的临时变量，以便在函数执行完后仍然可以访问和使用。5、缓存：可以使用闭包保存一些计算结果，避免重复计算，提高程序的性能。
2023-08-06 20:29:32
32
原创 react引入css方式
Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。什么是Sass：Sass是一个CSS预处理器，是CSS扩展语言，可以帮助我们减少CSS重复代码，节省开发时间。styled-components：目前github上有17k多的stat。aphrodite：目前github上有4k的star。radium：目前github上有6k的star。通过上面四种样式的引入，可以看到。
2023-05-19 20:37:50
1119
原创 Sass使用
Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。// .scss文件 $index : 6;} @ else {} } body {} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- // 生成的css代码 body {
2023-05-19 20:21:58
324
1
原创 对受控组件和非受控组件的理解？应用场景？
受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态。大部分时候推荐使用受控组件来实现表单，因为在受控组件中，表单数据由。如果选择非受控组件的话，控制能力较弱，表单数据就由。非受控组件，简单来讲，就是不受我们控制的组件。本身处理，但更加方便快捷，代码量少。
2023-05-17 09:18:23
109
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人