- 博客(56)
- 收藏
- 关注
RSS订阅原创 自己写个简单的vite插件
先在根目录建个plugins/vite-plugin-title-html.ts。在vite.config.ts里面引入自定义插件。
2024-07-07 10:39:54
328
原创 使用vite从0开始搭建vue项目
第二步：安装vite、typescript--ts、vue、@vitejs/plugin-vue--对单文件组件、热重载、生产优化的支持。第四步：在根目录下面创建index.html和vite.config.ts、tsconfig.json文件。第六步：在根目录新增src文件夹，下面新增vite-env.d.ts、main.ts、App.vue。pnpm add vite-plugin-html --动态显示页面的title。pnpm add vue-tsc -D --vue里面做ts检查。
2024-06-09 22:33:42
583
原创 vite常识性报错解决方案
原因：当你尝试从一个以 .ts 结尾的路径导入文件时，ESLint 可能会报告这个错误，因为它期望导入的是 JavaScript 文件（.js 或 .jsx）而不是 TypeScript 文件（.ts 或 .tsx）原因：因为项目里面使用ESModule的写法，但运行的环境又是Nodejs，虽然Nodejs支持ESModule,但默认不处理ESModule语法。：(导入的语法要显示的声明.js或.mjs，不然会报语法错误)解决办法：在项目根目录tsconfig.json文件新增。
2024-06-08 20:16:16
674
1
原创 vite+vue+ts项目中报错解决方案
那既然官方推荐 _volar_，简单的说volar是vetur的升级版本，提供了更好的功能并有更好的TS支持。二． 产生这个问题的原因是我们使用了ts语法，他只能识别.ts文件，并不能识别.vue文件，所以在引入组件的时候报错了。在项目的根目录下创建一个vite-env.d.ts文件，文件名自定义即可，后缀必须是.d.ts。如果问题还没有解决，就打开tsconfig.json文件，确保types中含有"node"。在vite.config.ts里面有配置相关的@/路径标签。在刚刚创建的文件中输入一下代码。
2024-06-08 17:12:36
1418
原创 使用nvm管理nodejs多个版本
在工作中，可能会遇到同时使用vue2和vue3开发项目，但他们的nodejs版本又不同，给你带来了困扰，不知道怎么办？下载成功后点击运行nvm-setup.exe，然后指定安装的目录，一路点击下一步到完成。nvm install 20 --下载的是20最新稳定版本,18的话就是最后一个版本。nvm use 18 --前提是nodejs只有一个版本。nvm uninstall 版本号 //卸载指定版本。nvm --help就会出现nvm所有的命令。nvm ls --标注*号的是正在使用的。
2024-05-25 22:00:15
415
原创 Vue3里面的setup上下文应用示例
插槽（非响应式的对象，等价于 $slots)：defineSlots 用于声明组件内部的命名插槽，该API是在 < script setup> 里使用的。这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。-props的进阶版，相当于props + emit：需要vue3.4+版本。defineProps：父组件传过来的值进行类型验证。中声明组件选项，而不必使用单独的。父组件：关键代码，其它的跟上面一样。子组件：修饰符验证方法1。子组件：修饰符验证方法2。-暴露公共属性（函数）
2024-05-21 14:38:12
434
原创 React里面useMemo和useCallBack的区别
useCallBack计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 useState 的变化，整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。useMemo缓存的是二次计算的数据，主要用于缓存计算结果的值，跟vue里面的computed大致相同的作用，这样避免组件重新渲染的时候，再重新执行整个函数，导致之前的二次计算也会重新执行一次。都是依赖数据发生变化，才会去更新缓存数据。
2024-05-21 13:26:02
783
原创 Vue3的setup系列篇之defineEmits和defineProps使用方式
defineEmits：触发事件（函数，等价于 $emit)defineProps：父组件传过来的值进行类型验证。
2024-05-21 13:22:28
453
原创 Vue3的watchEffect、watchPostEffect、watchSyncEffect
flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。不需要再指定需要依赖的值，会自动追踪依赖的值。
2024-05-20 12:05:32
295
1
原创 Vue3的watch使用方式说明
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；(newVal1, oldVal) => {}: newVal1是改变后新的值, oldVal是改变前旧的值。attr: 基本类型可以直接监听，引用类型需要用函数返回监听(基本数据类型-监听多个值：对某个值进行判断。
2024-05-19 12:36:27
745
原创 Vue3计算属性的使用
计算属性：需要对数据进行二次运算才使用，里面的值不变调用的话就使用缓存，除非里面依赖的数据项发生改变才会调用函数进行再次运算，依赖项可以有多个。
2024-05-16 16:31:12
139
原创 Vue2和Vue3重置响应式数据
Vue2我们提交表单后，想把表单数据重置到初始是不是这样？Vue3表单初始化就有很多方法，介绍其中一种。可以这样，就节省很多代码。
2024-05-16 16:25:54
307
原创 Vue3选项式和组合式生命周期说明
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
2024-05-16 13:30:42
622
原创 Vue3组合式响应式数据
number、boolean、string等等使用的方式都跟下面类似；底层实现响应式也是对象，有兴趣的朋友可以去看源码。reactive(attr)只能把Array、Object等了类型作为实参,不能传入基本数据类型。
2024-05-15 13:40:26
450
原创 react组件渲染性能优化之函数组件-useMemo使用
useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值。应用场景如：需要进行二次计算的状态。中的计算属性），由于函数组件一旦重新渲染，就会重新执行整个函数，这就导致之前的二次计算也会重新执行一次。，某些时候，组件中某些值需要根据状态进行一个二次计算（类似于。
2024-05-14 09:54:08
518
原创 react组件渲染性能优化之函数组件-useCallback使用
比如：UseCallBackOptimize组件传递了一个事件函数给ChildCom2、ChildCom3，只要其中一个子组件调用这个事件就会影响到另一个子组件重新渲染一次,useCallBack(fn, dependencies) ：fn想要缓存的函数，dependencies有关是否更新 fn 的所有响应式值的一个列表。,useCallBack这个Hooks主要是解决React.memo不能。，但解决不了传递事件的问题。，两个子组件什么都不变的。
2024-05-14 09:49:39
684
原创 react组件渲染性能优化之函数组件-memo使用
的状态时，子组件也会跟着更新，原因很简单，因为父组件更新了，那你子组件当然要重新更新。React.memo只做浅比较，比如修改数组的话，子组件不会更新。，如果你想要控制这个过程，请在第二个参数里面写上你自己的控制流程。你需要对原数组进行深拷贝，然后再赋值给原数组。属性并没有变化，因此子组件不会更新。React.memo只会对对象做浅比较。传递给子组件，此时我们修改。时，由于传递给子组件的。
2024-05-12 14:56:14
484
原创 使用React高阶组件
高阶组件英语全称为 Higher-Order Components，简称 HOC，所谓高阶组件，是 React中一种复用逻辑的技巧。简单示例:比如说现在有个餐厅，餐厅有固定餐牌，客人点了什么直接输入序列号，餐厅获取客人的餐桌号和点的餐单等信息,价钱也不一样。，高阶组件作为一个函数，接收你传入的组件，然后又返回一个新组件给你。
2024-05-09 11:27:34
441
原创 Vue2组件的data为什么是函数，而不是对象
组件实例 data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data(组件在创建的时候，源码会进行选项合并，会对定义的data进行数据校验，如果不是function，则出现警告)，产生数据污染。采用函数的形式，initData 时会将其作为工厂函数会返回全新 data 对象。根实例对象可以是函数也可以是对象(根实例是单例)，不会产生数据污染。data使用函数形式就不会造成数据污染。data是对象，数据之间会共用、污染。以下为个人见解，仅供参考。
2024-05-08 14:14:48
481
原创 JS各种概念
在前端开发中，常用的模块化方案包括CommonJS、AMD（Asynchronous Module Definition）、CMD（Common Module Definition）和ES6 Modules等。/纯函数（Pure Function）：一个纯函数的输出只取决于输入参数，不会改变任何外部状态或产生副作用。高阶函数（Higher Order Function）：能够接受函数作为参数或返回一个函数的函数。颗粒化（Currying）：将接受多个参数的函数转换为一系列接受单个参数并返回新函数的过程。
2024-05-08 14:00:14
435
原创 Vue2动态添加属性方式
Vue2不允许在已经创建的实例上动态添加新的响应式属性;1.使用Vue.set，里面的参数是Vue.set(target,index, value)2.使用Object.assign，给属性重新赋值。
2024-05-01 18:07:00
709
1
原创 linux常用命令
今天电脑上安装好了centos8.x，这样不需要购买服务器也能练习linux命令了电脑已安装git、nvm,使用nvm管理node版本以下是我总结的命令。
2024-04-30 11:14:08
353
1
原创 理解typescript泛型
/ 泛型定义console.log(getData<string>('你好啊'));// 重载+ 泛型return `名字是：` + vreturn `年龄是：` + vreturn vconsole.log(loadData('旺财'));add(value: T): any{ // void写不写都可以// 求取最小数c2.add(3)c2.add(1)c2.add(32)c2.add(26)//* 定义泛型接口方式1。
2024-04-29 15:42:14
245
原创 typescript方法重载
所谓方法重载（Overloading）是面向对象编程中一个概念，指同一个类中或者在父类和子类中，有多个同名方法，但这些方法的参数类型、参数个数或者类型的组合不同，即通过参数列表的不同来区分同名方法。
2024-04-29 14:51:59
162
原创 typescript抽象类里面定义多个private时，如何让实现类访问里面的数据
【代码】typescript抽象类里面定义多个private时，如何让实现类访问里面的数据。
2024-04-29 14:43:52
332
原创 js按照指定长度划分数组
/结果： [['a','b','c'],['d','e','f'],['g']]chunkArrayInGroups(['a','b','c','d','e','f'], 3);//结果： [['a','b','c'],['d','e','f']]chunkArrayInGroups(['a','b','c','d'], 2) // 结果：[['a','b'],['c','d']]
2024-04-28 17:24:31
370
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人