- 博客(122)
- 收藏
- 关注
RSS订阅
原创 Vue3详细讲解(超详细代码)
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
2024-05-15 10:23:10
2145
原创 数据埋点方式（详细讲解）
只有了解用户，我们才能服务好用户，而最接近用户的我们，自然要承担起更多的责任。那么在一个企业中，我们要如何去了解用户呢？最直接有效的方式就是了解用户的行为，了解用户在网站中做了什么，呆了多久。而如何去实现这一操作，这就涉及到我们前端的埋点了。因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程，所以我们可以和后端约定一个接口通过ajax去进行数据上报。方法可用于通过HTTP POST将少量数据异步传输到 Web 服务器。
2024-05-10 07:30:00
1930
原创 TypeScript 常见的面试题（超详细）
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集。TypeScript通过添加静态类型类接口和模块等功能，使得在大型应用程序中更容易进行维护和扩展。它可以被编译为纯JavaScript，从而能够在任何支持JavaScript的地方运行。使用TypeScript可以帮助开发人员在编码过程中避免一些常见的错误，并提供更好的代码编辑功能和工具支持。接口是用于描述对象的形状的结构化类型。它定义了对象应该包含哪些属性和方法。
2024-03-25 09:37:24
10216
1
原创 让代码开发更加优雅的小技巧
不知道大家有没有感觉， 一到三年工作经验的其实差距还是很大的 ，有的一年工作经验的能力的确比三年的更强点，难不成他们是天生编码能力强？非也！是因为他们会花更多的时间去学习去思考。其中个人觉得和 学习优秀的开源项目 会让你的编码能力提升的非常快…仔细来说说多人一起review 你的代码的时候 会迸发出更多 想法 让你知道 你又哪些方面没有考虑到Review 水平比你高的 你可以在他的编码习惯中学习到 很多思路与设计Review 水平比你低的 你可以看看那些错误是怎么发生的 从而以后去避免他。
2024-01-28 16:00:00
1766
原创 webpack底层原理和使用方法
Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。这里的“静态模块”指的是在开发阶段可以直接被Webpack引用的资源，这些资源可以直接被获取并打包进最终的输出文件（如bundle.js）。静态模块可以包括JavaScript代码、CSS样式表、图片和其他类型的文件。写这篇文章的用意，是因为我想优化项目里的webpack配置，打包配置，以及梳理依赖关系，删除无用依赖。
2024-01-25 10:29:51
1422
原创 vue3响应式用法（高阶性能优化）
翻别人代码时，总结发现极大部分使用vue3的人只会用ref和reactive处理响应式数据无论什么场景都是，但vue官方针对某些应用场景有其它的更好用的响应式api实现响应式，从而达到更好的性能效果。例如深层的树状数据结构可以通过shallowRef实现浅层响应式，不会被深层递归地转为响应式。本文通过例子详细总结几种vue3响应式的高阶用法。
2024-07-22 09:12:07
1182
原创 【2024】作为前端开发，必须掌握的 Vue3 的 5 个组合式 API 方法
在 Vue3 中，defineProps、defineEmits、defineExpose、defineOptions、defineSlots是一组新的功能函数，用于定义组件的属性、事件、暴露、选项和插槽。函数名称用途基本用法备注定义组件的属性（props）提供了基本的属性和事件处理通信功能定义组件可以发出的事件同上定义组件暴露给父组件的方法或属性提供了更高级的组件封装能力，适合需要高度自定义和复用的组件。在组合式 API 中设置组件的选项。
2024-07-15 09:54:37
971
原创 前端路由手写Hash和History两种模式
文章目录1. Hash模式：简洁而广泛适用2. History模式：更自然的用户体验3. 结论在现代Web开发中，单页面应用（Single Page Application，简称SPA）因其流畅的用户体验和高效的页面交互能力而备受青睐。前端路由作为SPA的核心技术之一，允许用户在不刷新整个页面的情况下，通过URL的变化来加载和切换不同的页面内容。本文将通过手写代码的方式，深入探讨前端路由的两种主流实现方式：Hash模式和History模式。1. Hash模式：简洁而广泛适用Hash模式利用URL的哈
2024-07-15 09:43:41
937
原创 【HTTP系列】HTTP 常见的状态码和适用场景（都在这了）
100：客户端在发送POST数据给服务器前，征询服务器情况，看服务器是否处理POST的数据，如果不处理，客户端则不上传POST数据，如果处理，则POST上传数据。307 （临时重定向）： 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。代表请求已被接受，需要继续处理。302（临时移动）： 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。304：协商缓存，告诉客户端有缓存，直接使用缓存中的数据，返回页面的只有头部信息，是没有内容部分。
2024-06-10 08:00:00
784
原创 【HTPP系列】DNS协议和DNS 完整的查询过程（详细图解）
DNS（Domain Names System），域名系统，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器。若仍然没有命中，则操作系统将域名发送至本地域名服务器，本地域名服务器采用递归查询自己的 DNS 缓存，查找成功则返回结果。若本地域名服务器的 DNS 缓存没有命中，则本地域名服务器向上级域名服务器进行迭代查询。域名是一个具有层次的结构，从上到下一次为根域名、顶级域名、二级域名、三级域名…为顶级域名，系统为用户做了兼容，域名末尾的根域名。除此之外，还有电脑默认的本地域名服务器。
2024-06-08 08:00:00
1574
原创 【HTTP系列】TCP/IP协议
OSI 参考模型与 TCP/IP 参考模型区别如下：OSI 参考模型与 TCP/IP 参考模型都采用了层次结构都能够提供面向连接和无连接两种通信服务机制不同点：OSI 采用的七层模型；TCP/IP 是四层或五层结构TCP/IP 参考模型没有对网络接口层进行细分，只是一些概念性的描述；OSI 参考模型对服务和协议做了明确的区分OSI 参考模型虽然网络划分为七层，但实现起来较困难。TCP/IP 参考模型作为一种简化的分层结构是可以的。
2024-06-07 07:45:00
1109
3
原创 【HTTP系列】OSI七层模型（每一层我都给你讲清楚了）
通过控制信息我们可以知道一个帧的起止比特位置，此外，也能使接收端检测出所收到的帧有无差错，如果发现差错，数据链路层能够简单的丢弃掉这个帧，以避免继续占用网络资源。两台主机之间的数据传输，总是在一段一段的链路上传送的，这就需要使用专门的链路层协议。该层提供的服务主要包括数据压缩，数据加密以及数据描述，使应用程序不必担心在各台计算机中表示和存储的内部格式差异。该层的主要任务是确定与传输媒体的接口的一些特性（机械特性、电气特性、功能特性，过程特性）表示层的作用是使通信的应用程序能够解释交换数据的含义，其位于。
2024-06-06 08:51:29
4821
原创 【HTTP系列】UDP 和 TCP的区别和应用场景
UDP协议面向报文，不拆分应用层报文，只保留报文边界，一次发送一个报文，接收方去除报文首部后，原封不动将报文交给上层应用。可以想象成流水形式的，发送方TCP会将数据放入“蓄水池”（缓存区），等到可以发送的时候就发送，不能发送就等着，TCP会根据当前网络的拥塞状态来确定每个报文段的大小。TCP 是面向连接的协议，建立连接3次握手、断开连接四次挥手，UDP是面向无连接，数据传输前后不连接连接，发送端只负责将数据发送到网络，接收端从消息队列读取。多长的报文，它统统发送，一次发送一个报文。也就是说无论应用层交给。
2024-06-06 08:45:03
762
原创 【HTTP系列】什么是HTTP？ HTTP 和 HTTPS 的区别，HTTPS是如何保证安全的
实现完整性的手段主要是摘要算法，也就是常说的散列函数、哈希函数可以理解成一种特殊的压缩算法，它能够把任意长度的数据“压缩”成固定长度、而且独一无二的“摘要”字符串，就好像是给这段数据生成了一个数字“指纹”摘要算法保证了“数字摘要”和原文是完全等价的。所以，我们只要在原文后附上它的摘要，就能够保证数据的完整性比如，你发了条消息：“转账 1000 元”，然后再加上一个 SHA-2 的摘要。网站收到后也计算一下消息的摘要，把这两份“指纹”做个对比，如果一致，就说明消息是完整可信的，没有被修改可以看到，
2024-05-23 09:09:58
943
原创 用Vue3.0 想实现一个 Modal组件（详细讲解）
现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同。组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式。这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的。这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可。内置组件进行包裹，其相当于传送门，将里面的内容传送至。主体内容需要灵活，所以可以是字符串，也可以是一段。组件内部是如何处理「确定」「取消」事件的，既然是。
2024-05-22 08:00:00
2141
1
原创 Vue 3.0中Treeshaking特性
如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去。实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量。是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫。中，无论我们使用什么功能，它们最终都会出现在生产代码中。简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。再一次打包，发现打包出来的体积并没有变化。
2024-05-21 08:00:00
444
原创 Vue3.0里为什么要用 Proxy API 替代 defineProperty API（详细讲解）
只能遍历对象属性进行劫持return})Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的= null) {return obj// Proxy相当于在对象外层加拦截console.log(`获取${= null) {return obj } // Proxy相当于在对象外层加拦截 const observed = new Proxy(obj , {
2024-05-20 08:54:11
914
原创 Vue3.0性能提升主要是通过哪几方面体现
这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用。可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多。中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小。关于这两个 API 具体的不同，我们下篇文章会进行一个更加详细的介绍。整体体积变小了，除了移出一些不常用的API，再重要的是。实例，它会在组件渲染的过程中把用到的数据。在编译阶段，做了进一步优化。
2024-05-15 08:00:00
1368
原创 Vue 3 的 setup语法糖到底是什么东西？
我们每天写vue3项目的时候都会使用setup语法糖，但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components选项来显式注册组件？setup语法糖经过编译后就变成了setup函数，而setup函数的返回值是一个对象，这个对象就是由在setup顶层定义的变量和import导入组成的。vue在初始化的时候会执行setup函数，然后将setup。
2024-05-14 09:29:13
1260
原创 vue3的设计目标和做哪些优化（更小、更快、更友好）
这样使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确，开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性。试想一下，如果很多类似的第三方库，我们只需要调用即可，不必关注实现过程，开发效率大大提高。这种形式，可以将一些复用的代码抽离出来作为一个函数，只要的使用的地方直接进行调用即可。中去递归响应式，这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑递归。，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了。编写的，提供了更好的类型检查，能支持复杂的类型推导。
2024-05-14 08:00:00
1070
原创 vue2和vue3的区别，vue3的新增特性
关于vue3的重构背景，尤大是这样说的：「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」利用新的语言特性(es6)解决架构问题。
2024-05-13 09:05:25
883
原创 vue要做权限管理和按钮级别的权限做法
取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过。菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识。路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转。按需挂载，路由就需要知道用户的路由权限，也就是在用户登录进来的时候就要知道当前用户拥有哪些路由权限。如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段，前端拿到数据也要做相应的处理。
2024-05-09 07:45:00
881
原创 前端处理跨域的九种方式（超级详细）
指一个域下文档或者脚本去请求另一个域下的资源，这里的跨域是广义的；同源策略（Same origin policy），简称SOP，是一种约定，它由Netscape公司1995年引入浏览器，它是浏览器核心也是最基本的安全功能，如果缺少同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指“协议+ 域名+ 端口”三种相同；
2024-05-08 09:15:00
17941
2
原创 vue项目的目录结构-如果是大型项目怎么划分结构和划分组件
项目的目录结构很重要，因为目录结构能体现很多东西，怎么规划目录结构可能每个人有自己的理解，但是按照一定的规范去进行目录的设计，能让项目整个架构看起来更为简洁，更加易用。这样做的好处在于，无论你的模块文件夹内部有多乱，外部引用的时候，都是从一个入口文件引入，这样就很好的实现了隔离，如果后续有重构需求，你就会发现这种方式的优点。文件夹，这个文件夹里面应该包含我们项目所有的路由模块，并且仅应该包含路由模块，而不应该有别的其他的非路由模块的文件夹。文件夹，里面放着所有的项目需要的资源，
2024-05-07 09:00:00
858
原创 SSR是什么和解决了什么问题
然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。服务器端渲染的是应用程序的"快照"，如果应用依赖于⼀些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据。结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。打开页面查看源码，浏览器拿到的是全部的。
2024-05-06 09:25:36
4716
原创 Vue项目axios的封装和主要的封装方式
大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置。请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。如果每个页面都发送类似的请求，都要写一堆的配置与错误处理，就显得过于繁琐了。封装的同时，你需要和 后端协商好一些约定，请求头，状态码，请求超时时间…请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问。
2024-05-06 09:14:22
1051
原创 什么是虚拟DOM和如何实现一个虚拟DOM（详细代码讲解）
虚拟 DOM （）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（和Weex实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟。
2024-04-30 09:00:00
1832
原创 自定义指令创建和应用场景模块的开发
开始之前我们先学习一下指令系统这个词指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (v-model和v-show)，Vue也允许注册自定义指令。
2024-04-29 08:30:00
810
原创 vue常用的修饰符的使用和应用场景（都在这了）
事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号。事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给。使用.native修饰符来操作普通HTML标签是会令事件失效的。在移动端，当我们在监听元素滚动事件的时候，会一直触发。在我们填完信息，光标离开标签的时候，才会将值赋予给。自动过滤用户输入的首空格字符，而中间的空格不会过滤。内置标签那样监听根元素的原生事件，否则组件上使用。
2024-04-28 08:00:00
904
原创 vue中key的原理
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点。，然后将比对出的结果用来更新真实的。那么这背后的逻辑是什么，
2024-04-27 08:00:00
676
原创 keep-alive的理解和使用方法（使用时的生命周期）
值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用。发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行。设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。中缓存组件的数量是否超过了设置的最大缓存数量值。表明该组件还没有被缓存过，则以该组件的。缓存的组件被激活的时候，都会执行。
2024-04-26 08:00:00
2444
原创 Vue.observable理解、使用和原理
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。源码位置：src\core\observer\index.js。，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。变更，它和被返回的对象是同一个对象。在非父子组件通信时，可以使用通常的。，让一个对象变成响应式数据。中，被传入的对象会直接被。翻译过来我们可以理解成。
2024-04-25 08:00:00
752
原创 Vue中slot的理解和使用场景（详细的内容）
如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情。在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中。子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件。插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用。父组件在使用的时候，直接在子组件的标签内写入内容即可。结构，当父组件使用的时候没有往插槽传入内容，标签内。第三个参数，父组件则能够得到子组件传递过来的值。
2024-04-24 08:30:00
1765
原创 vue中nexttick的使用（详细的讲解）
在修改数据之后立即使用这个方法，获取更新后的 DOM。将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行。每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了。如果我们一直修改相同数据，异步操作队列还会进行去重。，而是将修改数据的操作放在了一个异步操作队列中。如果想要在修改数据后立刻得到更新后的。节点，却发现获取到的是旧值。机制，只需要更新一次，所以。数据在发现变化的时候，
2024-04-23 08:30:00
2424
原创 vue的双向数据绑定
我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了ViewModel的数据也自动被更新了，这种情况就是双向绑定举个栗子当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下。
2024-04-22 09:07:57
2663
原创 vue组件之间的通信方式
适用场景：子组件传递数据给父组件子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值父组件绑定监听器获取到子组件传递过来的参数Father.vue。
2024-04-22 09:02:24
1239
原创 动态给vue2的data添加一个新的属性时会发生什么-怎样解决
标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行。中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。实现数据响应式的，直接动态添加新属性仍可以实现数据响应式。不允许在已经创建的实例上动态添加新的响应式属性。应创建一个新的对象，合并原对象和混入对象的属性。点击按钮，发现结果不及预期，数据虽然更新了（添加新属性的时候，却无法触发事件属性的拦截。如果为对象添加少量的新属性，可以直接采用。如果需要为新对象添加大量的新属性，则通过。方法，实现新增属性的响应式。
2024-04-21 09:00:00
917
原创 Vue中的组件和插件的区别
调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单。降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现。提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级。方法，第一个参数为组件的名称，第二个参数为传入的配置项。
2024-04-21 08:45:00
840
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人