自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

  • 博客(25)
  • 收藏
  • 关注

原创 typescript数据类型(二)

多个不同接口之间是可以实现继承的,但是如果继承的接口Person和被继承的接口NameItf有相同的属性,并且类型不兼容,那么就会报错。

2024-12-26 17:33:22 595

原创 Interface和Type的区别

在 TypeScript 中,interface(接口)和type(类型别名)有以下一些不同点:

2024-12-24 11:11:51 382

原创 typescript数据类型(一)

typescript是js的超集,主要学习ts里面的原始类型、字面量类型、数组类型、函数类型、类类型、接口类型、类型别名、联合与交叉类型、枚举类型、泛型等类型元素,以及类型推断、类型断言、类型缩小、类型放大等特性。

2024-12-24 10:38:55 425

原创 Pinia与Vuex的区别

Vuex和Pinia都是Vue.js的状态管理工具,它们的区别有哪些呢?

2024-12-23 22:35:47 3064

原创 Pinia如何进行状态管理?

Pinia 是 Vue.js 的一款状态管理库,它是 Vuex 的替代方案(虽然 Vuex 依然可用,但 Pinia 在很多方面展现出了优势),旨在为 Vue 开发者提供一种简洁、直观且功能强大的状态管理方式。

2024-12-23 22:31:46 517

原创 vuex如何进行状态管理?

Pinia 是 Vue.js 的一款状态管理库,它是 Vuex 的替代方案(虽然 Vuex 依然可用,但 Pinia 在很多方面展现出了优势),旨在为 Vue 开发者提供一种简洁、直观且功能强大的状态管理方式。

2024-12-23 22:09:24 556

原创 webpack5减少构建文件体积(五)

babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入,而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。将plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积 这段加入到babel-loader的属性中。如果项目中图片都是在线链接,那么就不需要了。开发如果项目中引用了较多图片,那么图片体积会比较大,将来请求速度比较慢。

2024-11-29 07:49:46 923

原创 webpack5提升打包构建速度(四)

当构建后代码出错了,会通过 xxx.map 文件,从构建后代码出错位置找到映射后源代码出错位置,从而让浏览器提示源代码文件出错位置,帮助我们更快的找到错误根源。这个时候再打包试试看,其实目前文件比较小的话,实际打包的速度比之前是慢的,只有文件的内容足够大时,处在一个临界值的时候,才发现用这个方法打包速度大大提高!打包完代码出错完全找不到哪里出错了,如果在配置文件中配置好属性,就能方便的找到打包后出错的代码所在行。在module的rules中的引入babel-loader的use中添加如下代码。

2024-11-28 10:27:03 861

原创 webpack5开发环境、生产环境配置 (三)

开发环境:就是我们开发代码时使用的模式。这个模式我们做两件事情:1、编译代码,使浏览器能识别运行2、代码质量检查,树立代码规范生产环境:开发完成代码后,我们需要得到代码将来部署上线。

2024-11-28 10:24:22 897

原创 webpack5 的五大核心配置(二)

注意:如果上面的操作中如安装less的时候,报错Vue安装loader报错:Syntax Error: Error: Cannot find module ‘less‘ 类似的信息,解决方法是:重新安装这个loader时@版本号就可以了,例如:npm i less-loader@6 -D就可以了。(5)用webpack打包,生成会发现报错了,原因是main.js中不应该用var定义变量,按照.eslintrc.js定义的规则中,是不能用var 定义变量的,所以改成const后,打包就不会报错了。

2024-11-27 23:40:49 1757

原创 webpack5 安装中的问题及方案(一)

Webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。

2024-11-27 23:34:22 749

原创 vue双向数据绑定失效场景

当直接给一个对象添加新属性时,Vue 的双向数据绑定不会自动生效。这是因为 Vue 在初始化实例时会对数据对象的属性进行Object.defineProperty的设置,以实现数据劫持和响应式。对于后来添加的属性,Vue 无法自动检测到其变化。

2024-11-17 19:15:55 802

原创 vue3.0中ref与reactive的区别

在Vue 3.0中,ref和reactive都是用来定义响应式数据的方法,但它们有一些区别

2024-11-14 21:16:54 342

原创 watch和watchEffect的区别

watch和watchEffect都是vue中用来监测数据变化的函数。

2024-11-14 20:49:22 297

原创 vue3中事件修饰符

当我们点击button的时候,先执行inner,传递到middle,此时middle里有一个.self,.self阻止了middle的click事件,所以继续冒泡到outer,执行outer的click事件。作用:打乱冒泡顺序(即可以理解为给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。冒泡事件:子元素的事件传递到父元素,即你促发子元素的click事件,由于冒泡,会使外层的父元素的click事件同时触发。作用:事件的默认行为立即执行,无需等待事件回调执行完毕(不常用)

2024-11-13 22:29:33 620

原创 什么是内存泄露,JS常见内存泄露及解决方案

内存泄漏是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放。根据JS的垃圾回收机制当内存中引用的次数为0的时候内存才会被回收。全局执行上下文的对象被标记为不在使用才会被释放。

2024-11-13 21:53:29 801

原创 this的指向

在 JavaScript 中,this的指向在不同的情况下会有所不同

2024-11-12 22:33:57 331

原创 vue2与vue3有什么区别?

vue2中使用的是选项式API,也就是数据是放在data里面多的,函数是放在methods里面的,计算属性放在computed里面,监听放在watch里面。vue2不支持碎片,vue3支持碎片,也就是说vue2中内容是必须包裹在一个根标签下面,vue3中可以没有这个根标签,因为它会默认将标签包裹在一个fragment的虚拟标签里面。在Vue2 中,会调用this.$emit 然后传入事件名和对象。(7)vuex 和pinia的使用:vue2中使用vuex进行状态管理,vue3中使用pinia进行状态管理。

2024-11-12 22:19:17 352

原创 变量提升与函数提升

JS引擎在读取js代码的过程中,分为两步。第一个步骤是整个js代码的解析读取,第二个步骤是执行。在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。

2024-11-11 23:55:38 680

原创 JS中class 类的用法

在 JavaScript 中,ES5 没有内置的 “类” 的语法,而 ES6 引入了更接近传统面向对象编程语言的类(class)语法。

2024-11-11 18:16:23 336

原创 JS实现斐波那契数列

斐波那契数列(Fibonacci sequence),又称黄金分割数列,因数学家莱昂纳多·斐波那契(Leonardo Fibonacci)以兔子繁殖为例子而引入,故又称“兔子数列”。

2024-11-10 08:28:11 408

原创 vue2、vue3与react中三者diff算法有什么不同?

所谓的diff算法就是数据更新后,生成新的虚拟DOM,新的v-node与旧的v-node进行对比,找出不同的区别进行操作,生成新的DOM的过程。

2024-11-10 07:58:40 639

原创 V8垃圾回收机制

V8是一款开源的JavaScript引擎,由Google开发。V8是Chrome浏览器的核心组件之一,并且被许多Node.js应用程序使用。V8引擎具有内置的垃圾回收机制,用于自动管理JavaScript程序中的内存分配和释放。

2024-11-10 07:34:31 1249

原创 apply、call、bind的区别?

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的,但是这三者在使用上有各自有不同的使用方法。

2024-11-09 22:36:20 653

原创 事件循环(Event loop)

由于vue的更新机制是异步的,所以当数据修改之后,dom还停留在更新之前,此时想要获取更新后的dom,可以使用nextTick,表示的是下次dom更新循环结束后执行的回调。不进入主线程,而是进入任务队列,当主线程中的任务执行完毕,就从任务队列中取出任务放进主线程中来进行执行。4、当主线程内的任务执行完毕(主线程为空时),会检查微任务的任务队列,如果有任务,就进入主线程全部执行,如果没有就从宏任务队列读取下一个宏任务执行;在主线程上排队执行的任务只有前一个任务执行完毕,才能执行后一个任务,形成一个执行栈。

2024-11-09 20:56:13 1676 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除