![](https://img-blog.csdnimg.cn/ecc49b5afacd401d997f49fb651af9e7.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
每日专栏
文章平均质量分 61
每日学习记录
小草莓蹦蹦跳
一枚努力奋斗的程序莓,喜欢记录和学习。本博客主要涵盖前端技术积累和工作积累。just do it,家人们加油加油油
展开
-
flex 布局和 grid 布局的区别
综上所述,Flexbox 适用于一维布局的场景,用于构建自适应和灵活的布局;而 Grid 适用于二维布局的场景,用于构建复杂的网格结构和定位布局。在实际开发中,可以根据具体需求选择合适的布局模型。原创 2024-01-23 22:53:53 · 1066 阅读 · 0 评论 -
SPA vs MPA vs PWA
SPA 全称为 Single-Page Application,表示单页面应用程序。也就是说只有一个 HTML 文件的 Web 应用,我们通过 Vue 开发的项目其实就是典型的 SPA应用在单页面应用程序中,我们不会为每个路径创建多个 HTML 文件,而是使用 JavaScript 为同一页面上的不同路径呈现不同的组件。当从浏览器请求单页面应用程序时,就会下载一个 bundle.js 文件,该文件包含所有请求网站的已编译 JavaScript 代码。使用这种方法,浏览器会通过使用。原创 2024-01-22 22:44:05 · 1251 阅读 · 0 评论 -
src 和 href 的区别
主要用于指定链接到页面中的外部资源,比如 CSS 文件、字体文件或其他网页文件。通过 href 属性引入的资源是可选的内容,用于提供额外的样式和交互。指向一些网络资源如百度链接,建立当前元素和本文档的链接关系,当浏览器识别到它他指向的⽂件时,就会并⾏下载资源。当浏览器解析到该元素时,会暂停其他资源下载,直到该资源执行完毕。在前端开发中,src 和 href 是两个常见的属性,属性引入的资源会对页面产生直接影响,是必需的内容。通常用于指定要嵌入到页面中的外部资源,比如。引入可选的、提供额外样式和交互的资源。原创 2024-01-17 20:27:30 · 1049 阅读 · 0 评论 -
Proxy 与 defineProperty 的理解、区别、优势、劣势
参考: Vue2 和 Vue3 响应式上有什么区别? / 使用 Object.defineProperty() 来进行数据劫持有什么缺点?_vue 2响应式和vue 3响应式区别-CSDN博客文档:Object.defineProperty() - JavaScript | MDN 作用:对一个对象进行操作的方法。可以为一个对象增加一个属性,同时也可以对一个属性进行修改和删除。 的问题主要有三个: 兼容性好,支持 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必原创 2024-01-04 21:53:57 · 2192 阅读 · 0 评论 -
如何判断一个对象是不是空对象
获取对象的属性列表,然后判断列表长度是否为0。循环遍历对象,如果有属性存在则不是空对象。原创 2023-11-15 11:02:29 · 276 阅读 · 0 评论 -
Vue 中 slot 是什么?作用?分类?如何实现?
插槽 — Vue.js插槽 Slots | Vue.js在 Vue2.6.0 之后,使用v-slot或者语法糖#插槽名定义;在这之前使用slot="插槽名"定义。跟 v-on 和 v-bind 一样,v-slot 也有缩写,也就是把参数之前的所有内容(v-slot:) 替换为字符 #;下面是三种默认插槽的内容定义方式,并且最后一个默认插槽的内容会覆盖掉上一个插槽内容。使用 template 包裹内容,同时使用 v-slot 绑定一个名称。原创 2023-11-15 11:01:56 · 7464 阅读 · 0 评论 -
操作数组元素的常用方法有哪些?
该方法返回一个字符串。在调用 toLocaleString() 方法时会得到一个逗号分隔的数组值的字符串,它与 toString() 方法的区别是,为了得到最终的字符串,其中元素是数组中当前搜索的元素,索引是当前元素的索引,而数组是当前正在搜索的数组。返回一个新的数组,包含从 start 到 end (不包括该元素)的数组元素。它的参数是一个回调函数,所有数组元素依次执行该函数,返回结果为 true 的元素会被返回。传给每个方法的函数接收三个参数:分别是当前元素、当前元素的索引值、当前元素所属的数对象。原创 2023-11-11 02:09:15 · 340 阅读 · 0 评论 -
打开了两个标签页是进程还是线程?
因为现代浏览器通常采用多进程架构来提高浏览器整体的性能和安全性,所以每个标签页都会在浏览器中独立运行。因此,打开两个标签页通常会导致浏览器启动两个单独的进程,每个标签页在自己的进程中运行,此外,每个插件也可能在单独的进程中运行,使得浏览器整体的性能和安全性得到提升。在浏览器中,打开两个标签页通常会创建两个独立的浏览器进程,而不是线程。每个标签页通常在单独的进程中运行,这样可以避免一个标签页或插件的崩溃影响到整个浏览器。这样可以避免一个标签页崩溃影响到整个浏览器。浏览器打开了两个标签页是。原创 2023-11-09 23:28:48 · 292 阅读 · 0 评论 -
Cookie 能跨域吗?如何设置?
在以上代码中,fetch 请求中的 credentials 设置为 include,并且响应头中设置 Access-Control-Allow-Credentials 为 true,就可以实现 Cookie 的跨域访问。对于跨域请求,在客户端需要明确指定携带 Cookie,可以通过 XMLHttpRequest 对象或 Fetch API 的 credentials 属性进行设置。在一般情况下,Cookie 是不允许跨域的。跨域设置 Cookie 只能在响应中设置,而不能在请求中设置。原创 2023-11-09 23:13:48 · 3357 阅读 · 0 评论 -
cookie 里面都包含什么属性?
这些属性中的大部分都是可选的,但通常建议至少设置名称、值和域属性来确保cookie 能够按预期工作。原创 2023-11-09 22:07:33 · 1058 阅读 · 0 评论 -
JavaScript 作用域链(Scope Chain)是什么?有什么作用?
在JavaScript中,函数存在一个隐式属性 [[ scopes ]],这个属性用来保存当前函数在执行时的环境(上下文),由于在数据结构上是链式的,也称为作用域链。我们可以把它理解为一个数组。console.dir(fn) // 打印内部结构作用域链的形成是由函数创建时确定的,它由函数创建时所处的执行上下文(Execution Context)和它的词法环境(Lexical Environment)组成。作用域链的作用包括:变量查找。原创 2023-11-08 21:43:17 · 457 阅读 · 0 评论 -
Vue3 <script setup>是什么?作用?
⑤ useAttrs 获取属性,useSlots 获取插槽,defineEmits 获取自定义事件,defineExpose 对外暴露。在组件中可以直接使用这些属性和事件,无需在 props 和 emits 中声明。在模板中就可以直接使用它们。<script setup> 是 Vue3 的语法糖,简化了组合式 API 的写法,其实是。① 在 setup 中声明的属性和方法无需 return,就可以直接在模板使用;而 <script setup> 中的代码会在每次组件实例被创建的时候执行。原创 2023-11-07 23:21:49 · 1611 阅读 · 1 评论 -
Vue 3 中,watch 和 watchEffect 的区别
watch:既要指明要监听的属性,也要指明回调。不用指明监听哪个属性,回调中用到哪个属性,那就监听哪个属性。watchEffect 有点像计算属性 computed:但 computed 注重的计算出来的值(回调函数的返回值),所以必须要写返回值。而 watchEffect 更注重的是过程(回调函数的函数体),所以不用写返回值。与比较,watch懒执行副作用;更具体地说明什么状态应该触发侦听器重新运行;访问侦听状态变化前后的值。原创 2023-11-07 17:37:40 · 728 阅读 · 0 评论 -
Pinia 是什么?Redux、Vuex、Pinia 的区别?
总之,Redux、Vuex 和 Pinia 都提供了一种可预测的状态管理方案,并有其自身独特的优点。Pinia 适合那些想要一个简单、轻量级的状态管理库的开发者,而 Vuex 则适合那些需要更多功能和灵活性的开发者。具体选择哪一个取决于应用的复杂度、开发团队的技能水平和个人偏好等因素。如果是 Vue.js 3 的项目,可以考虑使用 Pinia,否则可以考虑 Vuex 或 Redux。原创 2023-11-07 15:09:32 · 987 阅读 · 0 评论 -
对 Vuex 的理解(核心、状态修改、特点、缺点、底层原理)
总之,Vuex 是 Vue.js 生态中的一个非常重要的插件,适用于中大型的 Vue.js 应用,它通过提供集中式的状态管理模式、响应式更新、单向数据流、模块化组织和辅助函数等特性,可以更好地组织和管理应用的状态,提高开发效率和代码质量。原创 2023-10-08 00:49:57 · 366 阅读 · 0 评论 -
webpack 的 Loader 和 Plugin 的区别,常见的 loader 和 plugin 有哪些?
总结起来,loader 用于处理模块的转换工作,而 plugin 则用于扩展 webpack 的功能,增加额外的构建任务。它们在 webpack 的配置文件中通过不同的配置项进行配置和使用。原创 2023-11-06 22:54:21 · 909 阅读 · 0 评论 -
Webpack 中 Plugin 的作用是什么?常用 plugin 有哪些?
允许在编译时创建配置的全局对象;(Webpack4 之后指定 mode 会自动配置)是一个 webpack 内置的插件,不需要安装。原创 2023-11-06 21:55:04 · 796 阅读 · 0 评论 -
Tree shaking 的概念、作用和原理
① 使用 ES6(ES2015)模块语法中的 import 和 export 才可以触发这个机制;这是因为 tree shaking 只能在静态 modules 下工作。ECMAScript 6 模块加载是静态的,因此整个依赖树可以被静态地推导出解析语法树。所以在ES6中使用 tree shaking 是非常容易的。② 在项目的 package.json 文件中,添加 "sideEffects" 属性;③ 使用 mode 为 "production" 的配置项以启用更多优化项。原创 2023-11-01 23:18:26 · 599 阅读 · 0 评论 -
Webpack 中 loader 的作用是什么?常用 loader 有哪些?
webpack 只支持对 js 文件打包,像 css、sass、png 等这些类型的文件的时候,webpack 则无能为力,这时候就需要配置对应的 loader 进行文件内容的解析。因为 loader 支持链式调用,链中的每个 loader 会处理之前已处理过的资源,最终变为 js 代码。当 webpack 碰到不识别的模块的时候,webpack 会在配置的中查找该文件解析规则。通过使用不同的 loader,我们能够调用外部的脚本或者工具,实现对不同格式文件的处理。关于 loader 的配置,我们是写在。原创 2023-11-06 20:35:03 · 637 阅读 · 0 评论 -
Content-Type 值有哪些?
消息主体里按照字段个数又分为多个结构类似的部分,每部分都是以 --boundary 开始,紧接着内容描述信息,然后是回车,最后是字段具体内容(文本或二进制)。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。但是随着越来越多的 Web 站点,尤其是 Web/App,全部使用 Ajax 进行数据交互之后,我们完全可以定义新的数据提交方式,给开发带来更多便利。原创 2023-11-02 21:02:59 · 251 阅读 · 0 评论 -
webpack 与 grunt、gulp 的不同?
简单来说,Webpack 的主要功能是模块打包和代码分割,适用于现代前端框架;Grunt 和 Gulp 的主要功能是任务自动化,但不支持模块化开发,适用于传统的前端开发。但是在实际项目中,它们也可以结合使用,以实现更加高效的前端工作流程。webpack 与 grunt、gulp 是完全不同的两类工具。而现在主流的方式是用 npm script 代替Grunt、 Gulp,npm script同样可以打造任务流。原创 2023-11-01 18:50:49 · 1809 阅读 · 0 评论 -
webpack、rollup、parcel 优势和劣势?
结论先行:webpack 是模块化构建工具,具有强大的 loader 和插件生态,适用于大型复杂项目的构建;rollup适用于基础库的打包,功能没有webpack 强大;parcel适用于简单的实验性项目,在公司真实项目一般不用;原创 2023-11-01 18:50:25 · 617 阅读 · 0 评论 -
对 Webpack 的理解
webpack 是目前比较常用的模块打包工具,它能够很好地管理与打包开发中所用到的 HTML、 JavaScript 、CSS以及各种静态文件(图片、字体等)。使用 webpack 管理模块依赖,并编译输岀模块所需的静态文件,让开发过程更加高效。对于不同类型的资源, webpack 有对应的模块加载器。它会分析模块间的依赖关系,最后生成优化且合并后的静态资源。原创 2023-11-01 18:49:55 · 520 阅读 · 0 评论 -
Vue 是单向数据流,为什么有双向绑定?
是通过监听表单元素上的 input 或者 change 事件,然后再通过数据劫持 (Object.defineProperty) 将数据模型中的值与表单元素的值进行绑定。需要注意的是,虽然双向绑定在某些场景下提高了开发效率和用户体验,但是过多使用双向绑定可能会导致代码难以理解和维护。v-model 的实质是语法糖,它的内部会根据组件类型自动转换/解析成不同的事件和属性,默认是 input 和 value。,但是在表单交互中,双向数据绑定可以方便地将用户输入的数据同步到数据模型中,提高了用户体验。原创 2023-10-30 18:26:01 · 212 阅读 · 0 评论 -
用 Vue Router 的 hash 模式如何实现锚点?
③ 在目标组件中,可以使用 Vue 的生命周期函数 mounted 来。这样,当路由跳转到目标页面时,页面会自动滚动到指定的锚点位置。① 首先,在 Vue Router 的路由配置中,需要将。设置目标 URL 的 hash 部分为锚点的名称。scrollIntoView方法将其滚动到视图中。获取目标描点的 DOM 元素。mode 设置为 hash。② 在页面跳转时,使用。原创 2023-10-29 10:47:34 · 820 阅读 · 0 评论 -
原型、原型对象、原型链
JavaScript 的所有对象中都有一个私有属性,我们一般称之为隐式原型(__proto__),它指向的是构建出这个实例的类的显式原型也就是构造函数的 prototype。2、什么是原型对象?作用?定义:在构造函数创建出来的时候,系统会默认创建一个(普通)对象与这个构造函数相关联,这个对象就是这个构造函数的原型对象(prototype)。为构造函数的实例,共享属性和方法。所有实例中引用的原型都是同一个对象;原创 2023-10-26 22:29:20 · 93 阅读 · 0 评论 -
在 history 模式下,为什么刷新页面会出现404?
同时需要注意在使用 History 模式时,需要保证所有路由的访问路径都指向 index.html,否则仍然会出现404错误。这些配置将确保在 Vue 应用程序中使用 history 模式时,服务器能够正确地处理所有路由请求,并返回正确的页面。这段代码会将所有请求都指向根目录下的 index.html 文件,让前端路由来处理 URL 请求。具体的配置方式取决于对应项目使用的服务器环境,常见的有 Apache、Nginx 等。以将所有请求都代理到 Vue 应用程序的入口文件。原创 2023-10-25 11:43:20 · 3481 阅读 · 0 评论 -
history 模式上线需要注意什么事项?
总之使用 History 模式需要对后端进行相关配置,并且需要特别注意安全性和兼容性问题,同时在打包发布时需要正确配置 publicPath,确保页面资源路径正确。原创 2023-10-24 18:51:58 · 433 阅读 · 0 评论 -
常见的 Vue Router 的导航钩子/ 路由导航守卫
这些导航钩子提供了灵活的路由跳转控制机制,可以方便地实现各种复杂的路由跳转需求。同时,VueRouter 还提供了一些其他的导航钩子和高级特性,比如路由元信息、动态路由、命名路由等,可以进一步提高开发效率和应用的可维护性。三、全局守卫、路由独享守卫、组件内置守卫的区别。原创 2023-10-24 15:26:33 · 1224 阅读 · 1 评论 -
Object.getPrototypeOf()
1、作用获取指定对象的原型(内部[[Prototype]]属性的值),如果没有继承属性,则返回 null function Animal() {} var ani = new Animal(); console.log(ani); console.log(Object.getPrototypeOf(ani));2、注意在 ES5 中,如果传递给方法的参数不是对象,则会抛出TypeError异常;在ES6中,原创 2023-10-23 20:29:58 · 550 阅读 · 0 评论 -
开发中如何防盗链?
同时,还应注意防范钓鱼网站、XSS攻击等安全问题,确保系统的稳定性和安全性。将时间戳作为一个参数加到 URL 中,每次请求时都需重新生成时间戳,在响应时对 Referer 进行验证,判断请求是否来自合法的来源。比如,可以在 UR L或 cookie 中加入一个token,只提供特定的域名访问 CDN 中缓存的资源,来实现防盗链。Referer是 http 协议请求头中的一个字段,可以。通过记录访问者的IP地址,对接口或文件请求来源进行限制。需要说明的是,防盗链并不能完全杜绝盗链,但可以。原创 2023-10-23 20:29:39 · 211 阅读 · 0 评论 -
symbol 这个新增的基础数据类型有什么作用?
如果有一个,它返回现有的符号。否则,Symbol.for() 方法会创建一个新符号,使用指定键将其注册到全局符号注册表,然后返回该符号。如果我们想创建一个将被共享的 symbol,我们可以使用 Symbol.for() 方法而不是调用 Symbol() 函数。由于 Symbol 是一种基础数据类型,所以它具有很高的性能和可靠性,可以用于需要高效和安全的标识符创建和使用的场景。稍后,如果我们使用相同的键调用 Symbol.for() 方法,Symbol.for() 方法将返回现有符号。避免属性名冲突的问题。原创 2023-10-19 01:05:49 · 77 阅读 · 0 评论 -
在 Vue & react 中,哪些地方用到闭包?
在 Vue 和 React 中,也有使用到闭包的地方。在 Vue 和 React 中,由于都是响应式框架,会自动处理视图的更新,而这个过程中也会用到闭包。原创 2023-10-23 20:26:21 · 610 阅读 · 0 评论 -
Vue2 和 Vue3 响应式上有什么区别? / 使用 Object.defineProperty() 来进行数据劫持有什么缺点?
在 Vue 2 中,当一个对象被设置为响应式对象时,会通过 Object.defineProperty() 方法把每个属性都转换成 getter和 setter,当属性值发生变化时,会触发 setter,进而通知所有引用该属性的组件更新视图。Vue 3 中使用了递归遍历 Proxy 对象的属性,因此在访问嵌套属性时会更加方便和高效,而 Vue2 则需要通过 watch 或 computed 等方式才能实现嵌套属性的响应式。监听到属性的删除和新增,而且能够直接监听数组的变化,不需要对数组进行特殊的处理。原创 2023-10-17 23:21:16 · 398 阅读 · 0 评论 -
什么是内存泄漏?JavaScript 垃圾回收机制原理及方式有哪些?哪些操作会造成内存泄漏?
内存泄漏是前端开发中的一个常见问题,可能导致项目变得缓慢、不稳定甚至崩溃。内存泄漏是指不再用到的内存,没有及时释放,从而造成内存上的浪费。原创 2023-10-17 23:36:45 · 337 阅读 · 1 评论 -
画一条0.5px的线、设置小于12px的字体、解决 1px 问题
这里针对像素比为2的页面,把整个页面缩放为了原来的1/2大小。这样,本来占用2个物理像素的 1px 样式,现在占用的就是标准的一个物理像素。此时,伪元素的宽高刚好可以和原有的目标元素对齐,而 border 也缩小为了 1px 的二分之一,间接地实现了 0.5px 的效果。使用 Webkit 的内核的 -webkit-text-size-adjust 的私有CSS属性来解决。的值,然后把这个值通过 JSX 或者模板语法给到 CSS 的 data 里,然后就可以在 CSS 中用。原创 2023-10-17 17:10:36 · 315 阅读 · 0 评论 -
实现一个三角形、扇形、宽高自适应的正方形
当一个盒子的宽高都为0时,那么盒子的展现形式是由边框 border 的粗细和颜色决定的。:例如元素 width 设置为10%,overflow 设置为 hidden,伪元素的 margin-top 设置为100%利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现。:例如宽度设置为10%,height 为0,padding-top 也设置为10%利用伪元素的 margin-top 的值来实现。:例如宽度设置为10%,高度设置为10vw。在实现三角形的逻辑基础上,加上。原创 2023-10-17 14:03:15 · 228 阅读 · 0 评论 -
用CSS绘制一个三角形
实际上,浏览器不会绘制 clip-path 之外的任何区域,因此我们看到的是 clip-path 的边界。linear-gradient 需要结合 background-image 来实现三角形,下面就来逐步使用渐变实现一个三角形。那如何显示一个直角三角形呢,只需要将临近的两边都显示颜色,其他都是透明即可!最后一种方法 —— clip-path,它是最精简和最可具扩展性的。当一边有颜色,其他都是透明色的时候,就是我们想要的三角形了。使用 clip-path 可以为沿路径放置的每个点定义坐标。原创 2020-07-22 22:50:48 · 1237 阅读 · 1 评论 -
Vue 3.0 使用的 diff 算法相比 Vue 2.0 中的双端比对有什么优势?
Vue 3.0 中,每次更新时会将新旧 VNode 数组缓存起来,只对数组中不同的 VNode 进行比对,减少比对次数,提升性能。Vue 3.0 中,对于动态删除操作,采用了异步队列的方式进行,能够将多个删除操作合并为一个,减少 DOM 操作,提升性能。总的来说,Vue 3.0 的 diff 算法相比 Vue 2.0 更加高效,能够减少不必要的 DOM 操作,提升应用的性能。Vue 3.0 中,编译器会对静态节点进行标记,在更新时可以直接跳过这些静态节点,减少 DOM 操作,提升性能。原创 2023-10-16 23:37:41 · 519 阅读 · 0 评论 -
Vue 父子组件钩子的执行顺序是什么
在 keep-alive 组件中,子组件的 mounted 钩子只会在组件被首次渲染时执行,当组件被缓存并再次激活时,子组件的 mounted 钩子不会再次执行,而是执行 activated 钩子。父组件 beforeDestroy 钩子 => 子组件 beforeDestroy 钩子 => 子组件 destroyed 钩子 => 父组件 destroyed 钩子。父组件 beforeDestroy 钩子 => 子组件 beforeDestroy 钩子 =>原创 2023-10-16 23:33:04 · 411 阅读 · 0 评论