- 博客(83)
- 收藏
- 关注
RSS订阅原创 地址输入URL敲下回车会发生什么？
总之，从用户敲下回车键到页面完整呈现的过程，是多技术协同工作的结果。作为前端开发者，深刻理解这一系列流程，不仅有助于日常开发中的问题排查，也是优化网站性能、提升用户体验的关键。
2024-05-17 11:33:17
646
原创 ajax、fetch、axios它们之间的差异与区别是什么?为什么我们的项目中建议使用axios?
尽管Fetch是现代浏览器的标准，但在一些老版本浏览器中可能并不支持，而Axios很好地处理了这一问题，使得在网络请求方面具备更好的兼容性。返回结果是 Promise对象，获取结果有多种方法，数据类型有对应的获取方法，封装时需要分别处理，易出错。由于其高度封装和增强的功能特性，使用Axios往往能减少手动处理各种边缘情况的工作量，提高开发效率。Axios拥有庞大的社区支持，不断更新维护，且经过了大量的实际项目验证，稳定性较高。基于 Promise 对象设计的，可以解决回调地狱问题。浏览器支持性比较差。
2024-03-26 11:43:28
296
原创 vue2中如何实现数据的更新？
Vue2默认无法检测到对象属性的新增或删除，但如果是在实例创建之初就已经存在的属性，则可以通过直接赋值进行更新。若要动态添加或删除属性，需使用。不过，在Vue3中，由于引入了Proxy，对对象属性的添加和删除不再需要手动调用这些方法。但在Vue2中，为了保证响应性，上述方法是必要的。，而在非组件上下文或其他需要设置全局响应式数据的地方，可以使用。请注意，在组件内部通常使用。
2024-03-25 18:18:43
925
原创 JS数据类型
引用数据类型存储的是指向堆内存中对象的实际地址或引用，而不是对象本身。引用数据类型（堆值+栈引用）：引用数据类型的实例化对象存储在堆内存中，堆内存用于存放较大的、不固定大小的数据结构，允许动态分配和回收内存。在这两个例子中，obj和arr在栈内存中的引用地址并未改变，改变的是它们所指向的堆内存中的对象状态。修改引用数据类型的属性或元素时，不会改变栈内存中的引用地址，而是改变堆内存中对象的相应部分。当声明一个引用类型变量时，栈内存中存储的是指向堆内存中对象的引用地址，而非对象的实际内容。object（对象）
2024-03-25 15:56:42
509
原创 vue的插槽
子组件可以将数据作为插槽 props 提供给父组件，然后父组件在渲染插槽内容时可以使用这些数据。实际上在Vue中，默认插槽就是匿名插槽，即没有指定名称的插槽。Vue.js 中的插槽（Slots）是Vue组件间进行内容传递的重要机制，用于在父组件中向子组件插入内容。（Default Slot）: 默认插槽是没有明确命名的插槽，它用于接收父组件传递的所有未指定插槽名的内容。（Named Slots）: 具名插槽允许开发者为插槽赋予特定的名字，从而在子组件中精确放置内容。，它就是一个匿名插槽，也就是默认插槽。
2024-03-24 21:50:17
596
原创 JS的设计模式（23种）
抽象工厂模式提供一个接口用于创建一系列相关或相互依赖的对象，而无需指定具体类。客户端使用此接口选择所需的产品族中的产品对象。
2024-03-24 21:39:00
4482
原创 Error Lens插件
最近在看视频学习的时候，发现了一个我认为很好用的插件。就是Error Lens，这个插件它能够以高亮、内联显示代码中的错误、警告和其他诊断信息，让开发者无需查看控制台或问题面板，就能在编辑代码的过程中直观地看到并快速定位到代码中的潜在问题。它可以支持多种编程语言，包括但不限于JavaScript、TypeScript、Python、C#等。
2024-03-22 11:19:09
782
原创 解释前端路由的概念，以及单页应用（SPA）和多页应用（MPA）的区别
而在使用前端路由的SPA中，尽管URL改变了，但主要的内容渲染和数据更新都是在客户端JavaScript框架内完成，通过AJAX请求获取需要的数据，并动态更新DOM结构，实现页面内容的无缝切换。总结来说，SPA旨在提供更佳的用户体验和更高的性能，而MPA则在某些场景下具有更低的开发复杂度和更好的搜索引擎优化效果。随着现代Web技术的发展，也有越来越多混合型方案出现，比如服务端渲染SSR（Server-Side Rendering）结合SPA，在保持SPA优点的同时改善SEO问题。
2024-03-03 20:29:42
377
原创 Vue.js中的路由导航守卫和其使用方法
Vue.js 中的路由导航守卫是 Vue Router 提供的一套机制，用于在路由切换的过程中执行自定义代码逻辑，包括但不限于权限验证、页面滚动位置保存、加载数据等。beforeRouteEnter: 组件实例还未创建时就已存在的守卫，不能直接访问组件实例，可以通过 next(vm => {}) 访问组件实例并传递给回调函数。beforeRouteUpdate: 当路由的 params 或 query 发生变化（即当前路由路径不变，只有参数变化）时触发，此时可以直接访问组件实例。
2024-03-03 20:07:46
557
原创 浏览器渲染原理
合成线程拿到每个层、每个块的位图后，生成一个个「指引(quad)」信息。指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。变形发生在合成线程，与渲染主线程无关，这就是 transform 效率高的本质原因。合成线程会把 quad 提交给GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像。reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发layout。
2024-02-26 11:58:40
513
原创 事件循环的理解
何为进程：程序运行需要有他的内存空间，可以把这块内存空间简单的理解为进程，进程之间相互隔离 一个进程至少有一个线程 事件循环发生在事件主线程 为什么渲染进程不适用多个线程来处理这些事情？ 消息循环=事件循环。
2024-02-26 11:49:51
950
原创 对有状态组件和无状态组件的理解及使用场景
类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。组件内部状态且与外部无关的组件，可以考虑用状态组件，这样状态树就不会过于复杂，易于理解和管理。● 组件内部不维护 state ，只根据外部组件传入的 props 进行渲染的组件，当 props 改变时，组件重新渲染。● 内部使用 state，维护自身状态的变化，有状态组件根据外部组件传入的 props 和自身的 state进行渲染。
2024-01-21 20:23:02
695
原创 浏览器的内核以及区别？
常见的浏览器内核有两种：Trident（或称为MSHTML）和Gecko，它们分别由Internet Explorer和Firefox使用。此外，还有WebKit和Blink内核，它们由Safari和Chrome所采用。浏览器内核是指浏览器中负责解析和渲染网页的核心模块。它是浏览器的重要组成部分，负责将HTML、CSS、JavaScript等网页资源转化为可视化的网页内容。
2024-01-19 21:19:18
603
原创 说说你对promise的理解
Promise 是 JavaScript 中用于处理异步操作的对象，它的设计目的是解决回调地狱（Callback Hell）问题，使异步代码更加清晰和可读。：多个 Promise 可以链接在一起，形成 Promise 链，以便按顺序执行异步操作。：Promise 可以更容易地捕获和处理异步错误，避免了传统回调函数的复杂性和层级。：Promise 链允许你以更可读的方式组织和顺序执行异步操作，减少回调地狱问题。，用于处理多个 Promise 实例或快速获取已解决或已拒绝的 Promise。
2024-01-19 20:45:33
706
原创 $route和$router的区别
对象是 Vue Router 实例，它提供了导航功能，用于在不同的路由之间进行跳转。对象的方法，你可以在组件中进行路由的导航操作，如跳转到其他路由、替换当前路由等。对象是一个包含当前路由信息的对象，它提供了对当前激活的路由的访问和控制。对象，你可以获取当前路由的信息，如路径、参数等。：当前路由的完整路径，包括查询参数和哈希值。：一个对象，包含动态路由参数和查询参数。：当前路由的 URL 哈希值。：当前路由路径的字符串表示。：替换当前路由为指定的路由。：一个对象，包含查询参数。：跳转到指定的路由。
2024-01-18 21:39:04
592
原创 大文件的断点续传如何实现
断点续传是一种数据恢复技术，主要用于在读取或发送数据时，因为网络问题、磁盘问题等原因导致数据传输中断。断点续传技术允许你在已经传输的数据基础上继续传输，从而节省数据传输时间。断点续传通常用于文件传输过程中，当传输中断时，可以基于已传输的数据继续传输，从而提高文件传输的效率。例如，在下载文件时，如果下载中断，你可以从已经下载的文件中继续下载。断点续传通常由两部分组成：服务器端（或文件服务器）记录已发送的数据块信息（即断点信息）以及客户端（或文件客户端）根据服务器端的断点信息继续发送数据。
2024-01-17 18:46:00
545
原创 methods、computed、watch它们的差异与区别
在Vue中，Methods、Watch和Computed是三种用于处理数据和响应数据变化的不同方式。Watch：主动监控，每次监控，没有缓存，支持异步，深度监控，立即监控。Computed：被动计算，一次计算，拥有缓存，不可异步。Methods：主动调用，每次调用，没有缓冲，支持异步。
2024-01-17 10:33:53
535
原创 简述一下组件的生命周期
在进行组件化项目开发的时候都会存在一个组件的生命周期概念，像Vue、React、小程序等等，无一例外，而通常情况组件的生命周期主要分成三个阶段，包括：创建、更新以及销毁阶段。Vue的生命周期钩子函数又分为了：单个组件生命周期、父子组件的生命周期、带缓存的路由组件生命周期等不同的状态，在不同的状态下所拥有的生命周期内容是不相同的。带缓存的路由组件生命周期。捕获子组件错误的勾子。
2024-01-16 13:59:06
510
原创 说说JavaScript数字精度丢失的问题，如何解决？
在 JavaScript 中，数字精度丢失是一种普遍的问题。这是因为 JavaScript 内部的数字均以 IEEE 754 标准的双精度浮点数格式存储，这种格式只能精确表示有限个小数，而对于一些无限循环小数或无理数，无法精确表示，就会出现精度丢失的情况。例如，对于十进制的 0.1，其在二进制中是一个无限循环小数，无法精确表示为有限个二进制小数位。
2024-01-16 12:24:43
492
原创 JavaScript如何实现函数缓存？函数缓存有哪些应用场景？
需要注意的是，函数缓存适用于纯函数，即相同的输入始终产生相同的输出。对于有副作用的函数或依赖外部状态的函数，使用函数缓存可能会导致不符合预期的结果。因此，在应用函数缓存时，需要仔细考虑函数的纯度和可缓存性。函数接受一个函数作为参数，并返回一个新的函数。新的函数会先检查调用参数是否存在于缓存中，如果存在，则直接返回缓存结果；在JavaScript中，可以通过函数缓存来提高函数的执行效率。函数缓存指的是将函数的计算结果缓存起来，当下次使用相同的参数调用该函数时，直接返回缓存中的结果，避免重复计算。
2024-01-16 12:12:26
720
原创 如何实现一个两栏布局，右侧自适应？三栏布局中间自适应？
要实现一个两栏布局，右侧自适应的效果，可以使用 CSS 的 Flexbox 或 Grid 布局来实现。对于三栏布局中间自适应的情况，也可以使用 Flexbox 或 Grid 布局来实现。，使其成为一个弹性容器。左侧列使用固定宽度（例如200px），右侧列使用。，这样右侧列会自动占据剩余的可用空间。在上述代码中，通过将父容器设置为。
2024-01-16 12:00:22
475
原创 history 模式刷新 404 问题解决方法
这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。
2024-01-16 11:50:34
3092
原创 Vue 3中如何处理懒加载？
是 Vue 3 中定义异步组件的新方法。它返回一个 Promise 对象，该 Promise 对象在组件被请求之前解析为一个组件选项对象，从而实现异步组件的加载。在 Vue 3 中，处理懒加载的方式与 Vue 2 中有所不同。Vue 3 推荐使用。组件是 Vue 3 中新增的组件，用于处理异步组件的加载状态。属性指定一个加载中的占位符，直到异步组件加载完成后再显示真正的内容。来实现组件的懒加载。
2024-01-16 11:49:00
517
原创 Vue订阅发布模式
需要注意的是，Vue的订阅发布模式主要用于组件之间的通信，而不是全局事件的发布和订阅。如果你需要在整个应用程序范围内进行全局事件管理，可以考虑使用Vue的事件总线或其他状态管理工具（如Vuex）来实现。Vue.js是一个流行的JavaScript框架，它提供了一种名为"观察者模式"的订阅发布模式（也称为发布-订阅模式或事件模型）来管理组件之间的通信。通过这种方式，你可以在Vue组件之间进行松耦合的通信，实现数据的传递和操作。这个机制允许你在一个组件中定义自定义事件，并在其他组件中监听并响应这些事件。
2024-01-16 11:46:56
465
原创 说说你对ES6模块化的理解？和commonJS的区别？
ES6模块化（也称为ES2015模块化）是ECMAScript 6中引入的一种模块化规范，用于在JavaScript中组织和管理代码。它提供了一种更优雅和强大的方式来定义、引入和导出模块。与ES6模块化相比，CommonJS是另一种流行的JavaScript模块化规范，主要用于服务器端的Node.js环境。
2024-01-16 11:43:26
375
原创 说说你对Event Loop的理解是什么
为了解决这个问题，JavaScript引入了Event Loop机制。总结来说，Event Loop是JavaScript处理异步操作的机制，通过任务队列、微任务队列和调用栈的协作，实现了异步任务的执行和控制，保证了JavaScript的单线程模型下异步操作的顺序和可靠性。Event Loop（事件循环）是JavaScript中处理异步操作的一种机制，它帮助我们协调和处理各种任务的执行顺序。需要注意的是，微任务（如Promise的回调函数）总是在下一个宏任务之前执行，这保证了微任务的优先级高于宏任务。
2024-01-16 11:42:35
337
原创 Vue的路由实现：hash模式 和 history模式原理
当 URL 发生变化时，浏览器会向服务器发送请求，服务器需要配置来确保对任何 URL 请求都返回相同的 HTML 页面，然后由前端路由来处理 URL 的变化。当路由切换时，Vue Router 会根据新的 hash 值匹配对应的路由组件，并将组件渲染到页面中。在使用 history 模式时，需要在服务器配置中添加一个规则，将所有的 URL 请求重定向到前端的入口页面，例如。这样，在刷新页面或直接访问某个路由时，服务器会返回入口页面，并由前端路由来处理路由的切换。符号，更符合正常的 URL 地址格式。
2024-01-16 11:36:29
574
原创 微信小程序怎样给事件传值的
在触发事件的组件上，可以通过自定义属性将需要传递的值绑定到事件对象上。在事件处理函数中，通过。将值传递给事件处理函数。在触发事件时，可以使用。在事件处理函数中，可以通过。方法触发自定义事件，并通过。在触发事件时，可以使用。来获取自定义属性的值。
2024-01-15 15:05:46
1548
原创 vuex是什么？怎么使用？哪种功能场景使用它？
Vuex是Vue.js官方推荐的状态管理库，用于在Vue应用程序中管理和共享状态。它基于Flux架构和单向数据流的概念，将应用程序的状态集中管理，使得状态的变化更可追踪、更易于管理。Vuex提供了一个全局的状态树，以及一些用于修改状态的方法。创建Vuex Store： 在你的项目中创建一个Vuex Store。在Vue应用中使用Vuex： 在Vue应用程序中使用Vuex的方式有多种，常见的方式是在Vue实例中通过。来访问Vuex Store中的状态和方法，从而进行状态的读取和修改。
2024-01-14 21:23:48
1048
原创 Vue3 中 ref和reactive的区别是什么？
API 是建立在新的 Composition API 之上的。如果你需要在 Vue2 中实现类似的功能，你需要使用 Vue2 的。是两个用于处理响应式数据的 API。它们的目的都是使数据具有响应性，但它们之间存在一些重要的区别。但当处理复杂的数据类型（如对象或数组）时，是用来创建一个响应式的响应式对象或原始值数组。也就是说，当你想创建一个响应式的。时，可以直接修改对象或数组的属性或元素，因为。是用来创建一个响应式的引用对象或原始值，而。适用于简单的原始值或单个对象，而。只会对引用的值进行响应式处理。
2024-01-12 16:39:25
646
原创 Vue2和Vue3的区别
Vue2是把数据放入data中，在vue2中定义数据变量是data(){}；创建方法需要在methods:{}中进行创建。Vue3需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：从vue引入reactive；使用reactive() 方法来声明数据为响应性数据；使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。
2024-01-11 18:53:28
1016
原创 常用的hooks都有哪些，说出他们的作用？
这些是常用的 React Hooks，每个 Hook 都有特定的作用，能够方便地处理组件的状态管理、副作用操作、上下文等功能。它返回当前状态和一个 dispatch 函数，用于派发状态更新的动作。它接收一个值和一个格式化函数，用于显示在工具中的自定义标签。它接收一个回调函数和依赖数组，并在每次渲染后执行回调函数。它接收一个回调函数和依赖数组，并返回一个记忆化的版本，只在依赖数组变化时才会重新创建。它接收一个 ref 对象和一个工厂函数，在父组件中可以通过 ref 访问工厂函数返回的值。
2023-12-23 09:12:54
825
原创 Umi路由跳转传参方式都有哪些？
需要在路由配置文件中定义 param，路由对应的组件可以通过。属性传递参数，state 参数传递：使用。属性传递参数，路由对应的组件可以通过。2.params 参数传递：使用。组件进行路由跳转时，也可以通过。组件进行路由跳转时，还可以通过。组件进行路由跳转时，还可以通过。1.query 参数传递：使用。组件进行路由跳转时，可以通过。3.state 参数传递：使用。
2023-12-21 20:35:18
1329
原创 移动端1像素的解决方案？
例如，将一个1像素的边框放大到2像素，再通过scale(0.5)恢复原来大小。通过JavaScript动态设置viewport缩放比例: 使用JavaScript获取设备物理像素和设备独立像素的比例，然后动态设置viewport的缩放比例，从而实现1像素问题的解决。在移动端开发中，由于不同设备的像素密度差异，1像素问题成为了一个常见的难题。通过伪元素实现：使用伪元素before或after，并设置其content属性为空，然后通过border设置为1像素粗细的边框。
2023-12-20 20:21:50
583
原创 Js中浅拷贝和深拷贝有什么区别，如何实现？
浅拷贝：浅拷贝仅拷贝对象或数组的引用，而不是拷贝其内部的值。这意味着原始对象和拷贝后的对象会共享同一个内存地址，当其中一个对象修改了属性或元素时，另一个对象也会受到影响。深拷贝：深拷贝会创建一个完全独立的对象或数组，并递归地拷贝其所有的属性或元素。这意味着原始对象和拷贝后的对象不共享内存地址，修改其中一个对象不会对另一个对象产生影响。在 JavaScript 中，浅拷贝（Shallow Copy）和深拷贝（Deep Copy）是两种常见的数据拷贝方式，它们的区别在于拷贝的程度。使用展开运算符进行浅拷贝。
2023-12-19 20:27:41
496
原创 useEffect 的第二个参数, 传空数组和传依赖数组有什么区别？
需要注意的是，在使用具体的依赖项数组时，应确保其中包含所有在副作用函数中所使用的依赖项。如果某个依赖项被遗漏，可能会导致副作用函数中使用的数据不是最新的。作为依赖项，主要适用于希望在组件渲染之后执行一些只需执行一次的副作用操作，例如发送网络请求、订阅事件等。在特定的依赖项发生变化时进行调用，常用于处理需要根据依赖项更新的副作用操作。在组件初始化渲染完成后执行一次，并在每次指定的依赖项发生变化时再次执行。钩子函数中，第二个参数用于指定依赖项数组。不依赖于任何值，仅在初始化时运行一次，不会进行后续的更新。
2023-12-18 08:54:59
796
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人