joken1310 - 博客园

js模拟构造函数的实现过程

摘要：下面是 TypeScript 版本的 myNew 函数实现： function myNew<T>(constructor: new (...args: any[]) => T, ...args: any[]): T { // 创建一个新对象，原型指向构造函数的 prototype const obj 阅读全文

posted @ 2024-10-28 21:16 joken1310 阅读(18) 评论(0) 推荐(0)

TypeScript 中的类既可以作为值，也可以作为类型

摘要： TypeScript 中的类既可以作为值，也可以作为类型。让我们分别详细探讨这两个方面。 1. 类作为值在 TypeScript 和 JavaScript 中，类实际上是构造函数的特殊形式，因此可以像其他函数一样使用。你可以将类赋值给变量、作为参数传递给函数，或者在其他上下文中使用它。示例 cl 阅读全文

posted @ 2024-10-27 22:37 joken1310 阅读(123) 评论(0) 推荐(0)

ts 构造函数类型和构造函数返回值类型的区别

摘要：在 TypeScript 中，构造函数类型和构造函数返回值类型是两个不同的概念，它们分别用于描述构造函数的行为和结果。下面详细解释这两者的区别。 1. 构造函数类型构造函数类型描述的是一个类的构造函数的签名，包括构造函数的参数类型和返回类型。它定义了如何通过 new 关键字创建一个实例。示例 c 阅读全文

posted @ 2024-10-27 22:35 joken1310 阅读(193) 评论(0) 推荐(0)

vue tsx slots传入方式

摘要：代码子组件 import { defineComponent, PropType } from 'vue'; const MyComponent = defineComponent({ name: 'MyComponent', props: { title: { type: String as P 阅读全文

posted @ 2024-10-24 20:46 joken1310 阅读(79) 评论(0) 推荐(0)

vue3开启eslint报错：ESLint error: Parsing error: ‘＞‘ expected，vue文件tsx语法报错解决，eslint报错tsx语法解决

摘要：出错代码部分 <script lang="tsx"> import { defineComponent } from 'vue'; import MyComponent from './components/childAbc'; const App = defineComponent({ name: 阅读全文

posted @ 2024-10-24 20:38 joken1310 阅读(652) 评论(0) 推荐(0)

Vue 3 `useAttrs` 使用

摘要：在 Vue 3 中，useAttrs 是一个组合式 API 函数，允许你访问组件的所有属性（props）和传递给组件的非 prop 特性。这在自定义组件时非常有用，尤其是当你想要将这些属性传递给子组件或原生 HTML 元素时。使用 useAttrs 的基本步骤引入 useAttrs：从 Vue 阅读全文

posted @ 2024-10-24 20:00 joken1310 阅读(387) 评论(0) 推荐(0)

Yorkie 如何移除githooks 钩子

摘要：要移除 Yorkie 设置的 Git hooks，你可以按照以下步骤进行操作： 1. 手动删除 Git Hooks Yorkie 将 Git hooks 安装在项目的 .git/hooks 目录中。你可以手动删除这些 hooks 文件：打开终端，导航到你的项目目录。进入 .git/hooks 目阅读全文

posted @ 2024-10-22 21:26 joken1310 阅读(136) 评论(0) 推荐(0)

git hooks工具Yorkie 使用教程

摘要：以下是使用 Yorkie 的详细教程，包括如何在 npm postinstall 中自动运行 npx yorkie。使用 Yorkie 的步骤 1. 安装 Yorkie 首先，在你的项目中安装 Yorkie： npm install --save-dev yorkie 2. 配置 package. 阅读全文

posted @ 2024-10-22 21:23 joken1310 阅读(282) 评论(0) 推荐(0)

npm 生命周期

摘要： npm 生命周期是指在执行 npm 命令时，特定阶段会自动触发的脚本。这些生命周期脚本可以帮助开发者在不同的安装和管理过程中的特定时刻执行自定义命令。主要生命周期脚本以下是常见的 npm 生命周期脚本： preinstall：在安装依赖之前执行。 install：在安装依赖时执行。 post 阅读全文

posted @ 2024-10-22 21:21 joken1310 阅读(124) 评论(0) 推荐(0)

vscode vue代码或者前端代码断点调试

摘要：步骤先代码行点击断点点击调试按钮添加调试的项目配置接着配置写入代码运行的端口，和项目名称开始运行断点调试接着自动会跳出浏览器 vscode中断点的代码生效了，可以查看数据信息停止断点关闭浏览器即可阅读全文

posted @ 2024-10-21 21:01 joken1310 阅读(414) 评论(0) 推荐(0)

vue3 修改原对象，赋值原对象的ref或者reactive如何产生响应式视图变更，vue失去响应式的原因

摘要：代码测试 <template> <div class='box'> {{ demo[0]?.a?.b?.c }} </div> </template> <script lang='ts' setup> import { ref, reactive, computed, onMounted, next 阅读全文

posted @ 2024-10-20 22:50 joken1310 阅读(378) 评论(0) 推荐(0)

vue3 ref 或者reactive被赋值其他对象数据，用的是同一块内存，而不是深拷贝。修改原对象，ref不能响应式的原因

摘要：代码测试源对象改变也会改变ref内存数据 <template> <div class='box'> {{ abcDemo?.a?.b?.c }} <button @click="changeAbc">Change ABC</button> <div> {{ abdDemo?.a?.b?.c }} 阅读全文

posted @ 2024-10-20 21:25 joken1310 阅读(333) 评论(0) 推荐(0)

vue3 修改数组索引方式修改数组内容能不能响应式测试

摘要： <template> <div class='box'> {{ abc[0] }} </div> </template> <script lang='ts' setup> import { ref, reactive, computed, onMounted, nextTick, PropType 阅读全文

posted @ 2024-10-20 20:59 joken1310 阅读(72) 评论(0) 推荐(0)

vue3.5 测试props解构能不能响应式

摘要：代码测试 <template> <div class='box'> demo:{{ d }} <div> <child :abc='abc' /> </div> </div> </template> <script lang='ts' setup> import { ref, reactive, c 阅读全文

posted @ 2024-10-20 20:47 joken1310 阅读(46) 评论(0) 推荐(0)

vue3 深度响应式是否正常测试，以select options作为例子测试，select options后赋值是否不能正常显示选中的label

摘要： <template> <div class='box'> <template v-for="(ditem, dindex) in data1" :key="dindex"> <el-select v-model="ditem.value" clearable filterable> <el-opti 阅读全文

posted @ 2024-10-20 20:29 joken1310 阅读(29) 评论(0) 推荐(0)

vue i18n多语言拆分语言包参考

摘要：要将 locales/en.json 拆分为多个文件，并自动读取这些语言包，可以采用与中文语言包相似的方式。以下是具体步骤： 1. 创建语言包文件夹和子文件首先，在 locales 文件夹中创建一个 en 文件夹，并在其中添加多个 JSON 文件。例如： src/ ├── locales/ │ ├ 阅读全文

posted @ 2024-10-15 21:31 joken1310 阅读(575) 评论(0) 推荐(0)

vue3使用pinia仓库解构赋值响应式丢失的解决方式

摘要：代码 store import { defineStore } from "pinia"; import { ref } from "vue"; export const useMyTestStore = defineStore('mytestStore', () => { // state con 阅读全文

posted @ 2024-10-15 21:24 joken1310 阅读(1051) 评论(0) 推荐(0)

vite rollup打包和webpack对比

摘要： Vite 和 Webpack 是现代前端开发中常用的构建工具，但它们在设计理念和使用体验上有所不同。以下是对它们的一些对比： 1. 构建速度 Vite: 使用原生 ES 模块导入，开发时通过浏览器直接加载模块，启动速度快，热更新即时。 Webpack: 以打包为中心，构建速度相对较慢，尤其在大型项目阅读全文

posted @ 2024-10-14 22:10 joken1310 阅读(203) 评论(0) 推荐(0)

JavaScript 代码能够成功进行树摇（Tree Shaking），代码规范

摘要：要确保 JavaScript 代码能够成功进行树摇（Tree Shaking），你可以遵循以下几个实践： 1. 使用 ES6 模块树摇主要依赖于 ES6 的模块语法 (import 和 export)。确保你的代码使用这种模块系统，而不是 CommonJS 的 require 和 module.e 阅读全文

posted @ 2024-10-14 22:08 joken1310 阅读(90) 评论(0) 推荐(0)

vite 使用rollup 打包为什么比webpack打包更小呢

摘要： Rollup 和 Webpack 之间的差异在于它们的打包方式和优化策略，这导致了 Rollup 通常能生成更小的包体积。以下是一些主要原因： 1. 树摇（Tree Shaking） Rollup 对 ES6 模块的静态结构分析非常出色，能够有效地删除未使用的代码。这一过程被称为树摇（Tree Sh 阅读全文

posted @ 2024-10-14 22:02 joken1310 阅读(157) 评论(0) 推荐(0)

Vue 3 和 TypeScript 项目中使用 i18n

摘要：在 Vue 3 和 TypeScript 项目中使用 i18n（国际化）可以通过 vue-i18n 插件来实现。步骤 1：安装依赖首先，你需要安装 vue-i18n： npm install vue-i18n 步骤 2：创建语言文件在项目中创建一个文件夹（如 src/i18n），并在其中创建语阅读全文

posted @ 2024-10-14 22:00 joken1310 阅读(877) 评论(0) 推荐(0)

vite打包删除console，还有拆分太大的包配置

摘要：在 Vite 中，你可以通过使用 Rollup 插件来自动去除 console.log 语句。一个常用的插件是 rollup-plugin-terser，它能够压缩和优化代码，包括去除调试语句。以下是如何在 Vite 中配置该插件的步骤：安装插件：首先，你需要安装 terser 和 rollu 阅读全文

posted @ 2024-10-14 21:58 joken1310 阅读(948) 评论(0) 推荐(0)

html vite modulerpreload 和preload 作用和区别

摘要： <link rel="modulepreload"> 和 <link rel="preload"> 的功能在某种程度上是相似的，主要都是用于优化资源的加载性能，但它们之间有一些关键区别：相似之处预加载资源：两者都允许浏览器提前下载指定的资源，以减少后续使用时的加载延迟。非阻塞加载：都不会阻阅读全文

posted @ 2024-10-14 21:51 joken1310 阅读(738) 评论(0) 推荐(0)

element 穿梭框el-transfer 实现上下移动选中的数据顺序

摘要：代码实现 <template> <div> <el-button type="primary" size="default" @click="upDown('up')">up</el-button> <el-button type="primary" size="default" @click="u 阅读全文

posted @ 2024-10-13 13:55 joken1310 阅读(479) 评论(0) 推荐(0)

typescript 一些忽略检查的注释

摘要： 1. @ts-ignore 用途：忽略下一行代码中的所有类型错误。示例： // @ts-ignore const value: string = 123; // 不会报错注意：使用此指令时不需要提供描述，然而，滥用可能会隐藏潜在的错误。 2. @ts-nocheck 用途：在整个文件中禁用 Ty 阅读全文

posted @ 2024-10-13 13:53 joken1310 阅读(630) 评论(0) 推荐(0)

vscode git 提交不进行commit 校验按钮开启

摘要：第一种方式设置里面搜索 git verify，然后打钩然后git提交这里就有不校验的按钮了第二种方式直接setting.json 里添加配置"git.allowNoVerifyCommit": true, 阅读全文

posted @ 2024-10-10 21:53 joken1310 阅读(688) 评论(0) 推荐(0)

vue3 props 响应式测试，props使用，ref独立ts解构

摘要：概论 vue3 的props是深度响应的，深度数据改变都能监听到，并改变模板 3.2左右的版本解构props子对象不能响应式若遇到props子对象不能响应式监听，一般就是改变之前的数据和改变之后的数据没产生变化，所以没发生响应式代码父组件 <template> <div class='box' 阅读全文

posted @ 2024-10-10 21:41 joken1310 阅读(493) 评论(0) 推荐(0)

vue tsx功能测试，包含v-model 实现，slot实现，数据响应注意点

摘要： child.tsx import { defineComponent } from 'vue'; // 响应式数据需要放在函数外面，或者放在setup里面 const data1 = ref(123); function myComponent() { const data2 = ref(34); 阅读全文

posted @ 2024-09-26 20:54 joken1310 阅读(186) 评论(0) 推荐(0)

vite optimizeDeps 配置预编译的包

摘要：说明主要用来让vite启动的时候预编译一些包，而不是运行网页的时候才编译，这样可以加快网页首次的加载速度，但是可能vite首次启动会比较慢点配置示例 optimizeDeps: { include: [ 'vue', 'vue-router', 'vue-types', 'element-plu 阅读全文

posted @ 2024-09-25 21:36 joken1310 阅读(1249) 评论(0) 推荐(0)

前端mjs和js文件区别，mjs和cjs区别

摘要： .js 文件和 .mjs 文件之间的主要区别在于模块系统的使用： 1. 模块类型 .js 文件：默认使用 CommonJS 模块系统（尤其在 Node.js 环境中）。可以使用 require() 导入模块和 module.exports 导出模块。 .mjs 文件：明确表示使用 ES6 模块阅读全文

posted @ 2024-09-25 21:23 joken1310 阅读(3521) 评论(0) 推荐(1)

类型“{}”的参数不能赋给类型“(Partial<{ readonly [x: number]: string; } | {}> & Omit<(readonly string[] | { readonly [x: string]: 。。。

摘要：去掉子组件多余的空参数即可，比如props:{} 阅读全文

posted @ 2024-09-13 21:57 joken1310 阅读(269) 评论(0) 推荐(0)

vue3 tsx中使用hook

摘要：代码使用方组件 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; import useMyHooks from './hooks/useMyHooks'; export default defineC 阅读全文

posted @ 2024-09-13 21:49 joken1310 阅读(77) 评论(0) 推荐(0)

tsx 实现slot插槽

摘要： tsx 实现slot插槽父组件 <template> <div class="component-name"> <child> <template #default="scope"> <div>default</div> <div>{{ scope.a }}</div> </template> < 阅读全文

posted @ 2024-09-13 21:41 joken1310 阅读(142) 评论(0) 推荐(0)

tsx css class样式如何使用

摘要：参考代码 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; import type { Reactive, Ref } from 'vue'; import styles from '../scss/c 阅读全文

posted @ 2024-09-13 21:24 joken1310 阅读(146) 评论(0) 推荐(0)

tsx 基本使用方式案例、tsx 使用class 方式

摘要： tsx 子组件、tsx 使用class 方式 tsx 组件代码 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; import type { Reactive, Ref } from 'vue'; im 阅读全文

posted @ 2024-09-09 21:33 joken1310 阅读(323) 评论(0) 推荐(0)

tsx defineComponent emits 实现

摘要： emits 定义结构和使用子组件 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; export default defineComponent({ name: 'PageF', props: { r 阅读全文

posted @ 2024-09-08 21:47 joken1310 阅读(228) 评论(0) 推荐(0)

vue3 tsx 测试几种使用方式

摘要：总论 tsx setup里面定义了return dom 元素，则options api的 render函数不生效 options 的render函数生效前提是setup里面不能return dom options 的render里面不能使用this，只能使用ctx，且setup得返回数据，ctx才能阅读全文

posted @ 2024-09-05 23:19 joken1310 阅读(266) 评论(0) 推荐(0)

vue3.2 v-model 双向数据绑定实现

摘要：代码实现示例子组件实现双向绑定 <template> <div class="component-name"> <input type="text" :value="modelValue" @input="handleChange" /> </div> </template> <script s 阅读全文

posted @ 2024-09-04 22:25 joken1310 阅读(52) 评论(0) 推荐(0)

在 Vue 3 中，使用 `PropType` 定义复杂类型的 props

摘要：在 Vue 3 中，使用 PropType 可以定义复杂类型的 props。这对于确保组件 props 接收到的值符合预期的结构非常有用。下面是一些定义复杂类型的常见方法。 1. 定义对象类型你可以使用 TypeScript 的接口或类型别名来定义复杂对象类型。 import { defineCo 阅读全文

posted @ 2024-09-04 21:35 joken1310 阅读(1571) 评论(0) 推荐(0)

前端vue项目 git commit msg 文字校验实现，利用husky 和 commitlint实现

摘要： husky 安装使用说明 husky 作用是创建git钩子，然后触发命令执行安装 yarn add husky 初始化 npx husky init 会出现下面文件夹 commitlint 安装和使用安装 commitlint yarn add commitlint 安装校验规则库 @comm 阅读全文

posted @ 2024-09-04 21:31 joken1310 阅读(96) 评论(0) 推荐(0)

joken-前端工程师