oumae-kumiko-CSDN博客

原创【vue3 路由使用与讲解】vue-router ：简洁直观的全面介绍

vue-router,动态路由,动态添加路由addRoute,命名路由name,路由重定向redirect,路由传参params,query,组合式Api,路由跳转页面router-link,push,replace,获取路由参数,路由导航守卫,路由模式,路由缓存,嵌套路由,路由别名,声明路由

2024-03-02 03:43:15 1141

原创 vue3.4新特性：v-bind同名简写、defineModel

在上一篇 vue3.3 文章中，虽然写了 defineModel ，但并未考虑到写的时候3.4版本里defineModel 才作为稳定的API正式加入( 两年没看vue3 更新的内容了... )，并增加了对支持修饰符相关的内容；基于此，如果在vue3.3的版本里使用defineModel碰到某些错误的话，也许就会是该版本不支持，vue3.4也算是较为重要的一个小版本吧，建议还是使用3.4而不是3.3defineModel是配合父子组件使用的，所以下面分为2个代码块作为案例演示用法：

2024-02-29 21:59:05 458

原创 vue3.3 版本新特性总结 defineOptions、defineModel、defineSlots、defineEmits

新特性主要围绕着父子组件之间的相关的功能更新。本文主要以代码展示的风格来介绍功能。大家可以直接搞个父子组件，把对应代码复制粘贴进去，然后一个个试验即可。自己也动动手，加深理解。除了标题的4个宏指令，还有 toRef 和toValue，但让我挺无语的。。感觉没啥用，求指教。。以下案例包含的vue3.3新内容：defineOptions、defineModel、defineSlots、defineEmits、toRef、toValue

2024-02-29 21:08:32 500

原创【vue3】命令式组件封装，message封装示例；（函数式组件？）

仅做代码示例；当然改进的地方还是不少的，仅作为该类组件封装方式的初步启发；理想大成肯定是想要像 `饿了么` 这些组件库一样。

2024-02-29 01:25:02 526

原创 vue3跨组件(多组件)通信：事件总线【Event Bus】

【vue3/vue2】event库概述：本次所使用到的库为通用库，若在node环境使用则无需npm安装，本身自带的；浏览器环境下使用才需要npm安装。events库是从 Node.js 上移植Events模块的功能，因此可用的API完全一致（除了仅限在node环境下使用的API）；若想进一步深入，去看node官网的event文档即可。（注意版本差异！根据npm文档的描述，该库目前并未同步最新Node里对应的events模块）在VUE3的官方文档中描述到：【平级组件或是跨越多层嵌套的组件间通信，

2024-02-08 10:32:07 1661

原创 Fabric 画布缩放、拖动、初始化大小

作为自己项目的基础功能之一，自然是需要第一个回顾记录的了！1.拖动画布2.缩放画布3.监听窗口大小变化，从而初始化画布位置、大小涉及相关API：键盘快捷键功能、滚轮功能、监听窗口变化、fabric.js相关事件及API；

2023-12-08 11:29:46 1277

原创【vue3】defineSlots, useSlots, $slots 记录/讲解

【vue3】defineSlots, useSlots, $slots 记录/讲解。插槽＜slot＞ / v-slot 的使用与讲解。仅支持 Vue 3.3+ 的版本。就因为新增了这API，让我写了这文章。其他功能描述同 $slots 一致。这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。defineSlots() 只接受TS类型参数，没有运行时参数。也就是说你项目不是TS的话，就不用看这个了。它还返回slots对象，该对象等同于在 setup 上下文中暴露或由us

2023-08-02 18:35:51 5422

原创项目架构：eslint 代码检测、提交代码审查

项目代码开发规范配置；项目代码 git commit 提交时自动检测是否符合规范；

2022-12-01 17:40:01 1438 1

原创项目架构：prettier 提交检测、全局||自动格式化代码

1、每次保存文件后自动格式化；2、每次提交代码前运行命令进行全局格式化；3、每次提交代码时自动对提交的文件进行代码格式化；

2022-12-01 17:19:15 1951

原创项目架构：husky + lint-staged + eslint - git提交前自动检查代码

拒绝代码潜在错误，尽量减少代码屎山，从我做起~~目前该方法在 git 提交代码前时，无法检测处理ts 类型报错，Ts相关报错由于不是eslint的报错，所以无法处理。如果有小伙伴们知道解决方法的，欢迎告知、交流~~（个人使用的是vite）

2022-09-19 22:38:09 678

原创【vue3组件之 keep-alive 功能细节讲解】优先级、生命周期、离开&再度激活、缓存销毁

注意事项：1.优先级:如果`exclude`和`include`内都有同个组件名，`exclude`优先级高于`include`2.缓存销毁:`max`当已缓存的组件数量超过`max`值，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。3.生命周期:被缓存的组件才会调用`activated` 这些缓存相关的生命周期 ,换句话说就是`exclude`内的组件不会触发activated！！4. 离开组件、再度激活:当组件在`

2022-04-04 23:45:41 4666

原创【vue3 之 emits & $emit() 讲解】监听子组件事件、emit事件验证、options写法、composition setup写法

emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，也可以是对象。1、数组形式和对象形式的值为null，表示该emit事件无验证函数。2、对象形式且值为函数表示该 emit 配置了事件验证验证函数必须有return 真假值，真值表示通过验证，假值则 vue 会自动抛出 warn 警告！不 return 值默认当做失败，抛出 warn 警告！验证函数主要就是验证参数是否正确，并不会在 return false 时中断emit() 事件！

2022-04-03 23:18:34 22954 1

原创【vue3 组件生命周期流程 & 功能】13个生命周期详解

单一组件、父子组件的生命周期。仅限开发环境下有效的生命周期。不讲SSR的生命周期：serverPrefetch。也就是只讲客户端的13个生命周期！this的数据：除了`beforeCreate`，其他12个生命周期的 this 都能获得组件实例对应初始化完成的内容。`beforeUpdate()` 永远只在所有父子组件的 `mounted() `之后才会触发！例子里的生命周期根据功能进行了划分，生命周期的顺序都标了数字！setup() 调用时间，与调用时间相关功能的讲解。onMounted之类的

2022-02-27 22:01:38 4874

原创【vue3 Pinia使用与讲解】vue3新一代的Store应用工具

本文章旨在快速帮助上手Pinia基础与核心部分。Pinia 的主要 Api * createPinia - Plugins * defineStore * storeToRefs * mapState * mapGetters * mapActions * getActivePinia- Store的核心配置： + State + Getters + Actions与 Vuex 相比，Pinia 提供了一个更简单的 API，没那么死板。

2022-02-24 01:21:41 12455 3

原创 vue3 `inheritAttrs`属性继承与`$attrs`使用与讲解

当template有根元素的时候，绑定到组件上的属性和事件会自动继承到根元素上。当组件返回单个根节点时，非 prop 的 attribute 将自动添加到根节点的 attribute 中。同样的规则也适用于事件监听器：如果组件是片段(多节点)，并且组件标签绑定了attr和事件，都不会继承，并且会抛出警告！也就是说，片段组件需要将 inheritAttrs 设置为 false。当然不设置为 false 也有个好处，抛出警告告诉编程人员，这个组件是多节点的！你对该组件标签设置的 attr 和事

2022-02-12 00:23:41 6033 3

原创【vue3 ＜script setup＞ props 使用与讲解】defineProps、withDefaults | ts类型限制、默认值设置

本章主要涉及api内容：defineProps、withDefaults；defineProps 只能是要么使用`运行时声明`，要么使用`类型声明`。同时使用两种声明方式会导致编译报错。；defineProps、withDefaults 是只在 <script setup> 语法糖中才能使用的编译器宏。他不需要导入且会随着 <script setup> 处理过程一同被编译掉。withDefaults 只能与基于类型的defineProps声明一起使用；参数类型、默认值、是否必传、自定义验证。

2022-01-28 00:55:10 52515 15

原创【深入vue3 之 directive 指令的使用与讲解】

自定义全局指令：实例app.directive()参数：{string} name{Function | Object} [definition]返回值：如果传入 definition 参数，则返回应用实例。如果不传入 definition 参数，则返回指令定义。用法：注册或检索全局指令。自定义指令概念：在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。自定义指令是vue提供给我们用原生DOM封装一系

2022-01-26 23:19:13 20455 8

原创【VUE3 之 v-model 绑定子组件的新特性讲解 & 使用】绑定单个&&多个 v-model、自定义修饰符

本章内容：v-model绑定子组件的默认方式、绑定多个v-model、自定义v-model修饰符。讲解知识点:`v-model`参数、多个`v-model`绑定、自定义`v-model`修饰符自定义修饰符：对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"，然后`[参数名]Modifiers.[修饰符名]`使用`props`的内容：`[参数名]`，自定义修饰符的为`[参数名]Modifiers``emits`的内容：`update:[参数名]`

2022-01-10 15:35:34 3449 1

原创【vue 3 之 `watch()` & `$watch()` 侦听器的使用与讲解】各侦听源&各配置参数案例讲解

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。缓冲回调：缓冲回调不仅可以提高性能，还有助于保证数据的一致性。在执行数据更新的代码完成之前，侦听器不会被触发。简单来说，同步修改数据时，修完操作执行完毕后才会触发回调。注意是同步！所以异步操作的时候，要注意多次触发watch的问题。（所有同步操作为1次，异步操作有几次就触发

2022-01-10 14:36:28 1704

原创获得fabric.js的ts类型声明提示

1、安装fabric的TS声明库：npm i --save-dev @types/fabric2、重启编辑器。3、点赞收藏来一波

2024-04-10 15:46:48 93

原创【vue-router 路由篇】传入私有数据给目标路由地址而不显示在url上

也许还有另一个场景，不方便缓存路由时，返回上级路由时，上级路由又不一定要重调接口获取数据（直接使用缓存数据），则也可以通过该方式传个判断值给目标进行判断（虽然也可以在pinia vuex之类的里面存相关变量去判断，但需要不断的修改该变量，这种算是下下策）。也许你会碰到这样一个场景，在【返回上级路由，或者跳转目标路由】时，在部分场景下如果临时需要传给目标路由相关数据，则这篇文章必定会对你有所帮助。

2024-03-16 01:50:27 198

原创 vue2 / vue3 路由(返回&跳转)时判断 + 取消跳转

vue2 / vue3 路由(返回&跳转)时监听表单变化，提示相关信息，取消跳转等

2024-03-16 00:57:20 251

原创 Vue3 重置&覆盖 reactive 数组数据的方法

核心要点：通过splice删除原数组内的所有数据，并添加新的数据进去。潜在影响：大数据量下，splice重置数组和 ref 的.value重新赋值重置数组，哪个耗时短还需自行测试。通过 `splice` 传入0 和 Infinity 来删除原数组从头到尾的内容，然后`...[]`将新数据丢进响应式数组里。

2024-03-06 16:33:12 531

原创【axiox】前后端接口通讯数据交互

重要全局配置：axios.create(); 设置axios请求的公共配置信息。service.interceptors.request.use((config)=>{}) 请求拦截器service.interceptors.response.use((res)=>{},(err)=>{}) 响应拦截器const source = axios.CancelToken.source(); 用来取消接口请求的。

2024-03-02 04:12:07 439

原创【JS】indexedDB基本入门使用；

本文基本仅做个人简单学习记录；

2024-02-28 15:35:30 156

原创【JS运算符/表达式】`?.` `??` `...` `,` `&&=` `||=` `?:`等运算符讲解

逻辑与赋值（&&=）；逻辑或赋值（||=）；空值合并运算符（??）；逻辑空赋值（??=）；可选链运算符（?.）；... 展开语法；逗号运算符（,）；条件（三元）运算符；自增、自减的前缀式后缀式；delete；取余 %；加法赋值运算符 +=；加减乘除；

2024-02-25 22:52:29 179

原创【JS解构】数组解构、对象解构

而且解构语法直接的特性基本都是能一起使用的！例如 xx: newXX = '默认值'

2024-02-25 19:10:40 278

原创【颠覆旧知识】JS的原型链搜索原则；

在当前对象未找到该属性，就一直向上查找，找到就停止并返回该数据，如果直到object的原型也没找到，就返回undefined ，如果是调用方法就报错, 该 xxxx 不是一个函数。直到某个的原型的值为null都没找到该属性的话则终止，然后返回 undefined ，如果是调用方法就会导致报错, xx is not a function。没想到是在搜索过程中遇到原型的值为null时，就停止，并不是就会一直查找到Object的原型才停止；在当前对象未找到该属性，就沿着原型链向上查找，找到就停止并返回该属性，

2024-02-25 18:00:11 753

原创【CSS:长度】绝对长度单位与相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，你可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用。长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。惟一一个你经常使用的值，就是。

2024-02-24 20:32:45 400

原创【CSS】设置文字(文本)的渐变色

第一步设置渐变颜色background: linear-gradient(278.83deg, #5022bd 31.42%, #8636d1 75.55%); // 先设置渐变色背景；第二步设置颜色的使用范围background-clip: text; // 背景被裁剪成文字的前景色。-webkit-background-clip: text;第三步将文字颜色设置为透明，这样即可暴露出文字的渐变色背景；color: transparent;// 如果你的需求不涉及切换字体颜色可

2024-02-18 17:41:24 601

原创【canvas】实现画布橡皮擦功能、并解决擦除不连贯问题；

简单介绍橡皮擦功能思路，代码demo自己看看就好了，一点都不复杂：确认橡皮擦大小，可动态设置；鼠标按下记录点击的坐标，然后根据设置的橡皮擦大小画一个圆，最后清除该圆形区域坐标范围的颜色信息；然后创建鼠标移动事件；按下后鼠标移动过程中对移动的轨迹坐标进行清除颜色信息。移动过程中，为了解决鼠标移动事件响应是有时间间隔的，导致正常情况下鼠标快速移动时出现橡皮擦擦除颜色不连贯的问题，为此需要每次擦除需记录上个坐标点，然后对当前坐标点连起来，连起来的范围就是要擦除的坐标范围；鼠标松开销毁移动事件；

2024-02-09 10:43:34 561

原创【Fabric.js】监听画布or元素的点击、选中、移动、添加、删除销毁、变形等各事件

例子就用vue项目组件里的代码，fabric的使用跟vue、react、angular之类的框架都没任何关系！代码中监听事件回调函数里的第一个参数，根据事件的不同，有目标图形信息、坐标信息等，自己一看就看得懂了，不讲解；在fabric使用过程中，如果想要玩各种花样，那么fabric的事件监听是一定、必须、肯定要掌握！并且本demo只对功能进行讲述，实际项目使用肯定要进行封装，别直接就照抄导致写的丑！代码只简单介绍一些常用的目标监听事件，更全面的、更多花样的玩法自行查阅官网即可~~

2024-02-08 11:41:33 1180

原创【canvas】获取鼠标点击位置坐标的颜色信息

核心API为getImageData，传入4个参数，前2个为点击坐标xy，后2个都传1；表示以当前点击位置为起点，取宽为1、高为1的像素范围信息；在项目当中，要实现某业务需求例如PS魔棒功能时，则需要获取点击坐标的颜色信息。功能不复杂，代码也很少，一看便知~~

2024-02-08 11:13:11 231

原创【fabrc.js】创建组（fabric.Group）类型的 3 种方式

方法1：先选中已存在画布内多个图形，然后拿到ActiveSelection数据，随后调用 `toGroup()` 即可将选中的图形创建为组对象；方法2：new fabric.Group() 获取group实例，通过new的时候传入图形参数[o1,o2...]，然后将group实例add到画布上；方法3：在方法2的基础上，group实例也可通过addWithUpdate将图形添加进组里。上述3种方法使用时对应多种不同的场景，根据当前需求进行选择其中一个方式即可；

2024-01-31 16:46:45 664

原创【fabric.js】toDataURL 性能问题、优化

toDataURL 性能问题、优化；吐槽：当时解决大量图形的性能瓶颈，解决完虚拟化列表后，自测时还是发现某些情况下（某些素材）加载时、操作时有性能问题，当时找了半天最后才发现是 toDataURL 导致的性能问题；情景：在做某些功能的时候涉及到图形的预览，预览的时候是导出为40*40 像素的图片，当碰到某些图形非常小的时候，例如该图形是0.01宽/0.01高，那么如果想要得到该图形40*40大小的图片则需要放大非常大的倍数 multiplier，从而导致 toDataURL 一个函数就需要执行1秒(根据放大

2024-01-26 19:01:14 1133

原创【NodeJS & JS】动态加载字体的各方式及注意事项；

方案1：创建 style 标签，写入@font-face{font-family: 'xxx';src: url('xxx')} 等相关字体样式；将style标签添加到body里；方案2：通过 new FontFace() 进行字体加载，然后通过相关API进行检测加载情况；方案1的适用场景：适合一次性加载所需字体；自己对应功能读取字体结构信息不依赖浏览器的真实加载情况；对加载字体的延迟情况无要求；方案2的适用场景：适合完全加载好字体再执行某功能，避免字体还原显示异常（例如我项目所用的fabric库

2024-01-26 18:26:56 430

vue2生态之vuex3的深入学习资料

vue3的$forceUpdate到底有什么用？优雅应用场景有哪些？