- 博客(67)
- 收藏
- 关注
RSS订阅原创 Rollup系列之安装和入门
的主要用途是将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它特别适用于将ES模块编译成不同的模块形式，如等，以便在不同的环境中使用。
2025-03-30 20:49:21
409
原创 typescript快速入门之安装与运行
比如，如果你想使用 ES2015 的功能，但是又想要兼容 ES5，你就可以设置 “target”: “ES5” 和 “lib”: [“ES2015”]。- module : 指定生成的模块代码系统，如 CommonJS、AMD、System、 UMD、ES6、ES2015、ESNext 等。- extends : 这个选项允许一个 tsconfig.json 文件继承另一个 tsconfig.json 文件的配置。- rootDir : 指定输入文件的根目录，用于控制输出目录结构。
2025-02-15 12:52:27
544
原创 typescript快速入门之常见类型
基本类型就是以下：string、number、boolean、null、undefined、symbol、bigint、object、any。：泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。注意：可选参数必须要在必选参数后面。: 可以在参数声明后面直接赋值，表示参数默认值。参数不声明类型，TypeScript默认为。类型，可以使用 :类型 来声明参数类型。如果函数没有返回值，默认使用。如果参数是可选的，可以使用。来标记返回值类型，也可以。
2025-02-15 12:48:55
243
原创 Vue响应式进阶常用API之effectScope、getCurrentScope、onScopeDispose学习
官方解释：创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。获取当前组件是否还有活动的effect，可以用在onBeforeUnmount、onUnmounted等钩子中。具体解释：就是创建一个effct作用域，当需要的时候可以调用里面的监听、计算熟悉等，不需要的时候可以清空。当前页面或组件注销时会触发 onScopeDispose 事件。
2024-09-06 16:20:30
570
原创 Vue响应式进阶常用API学习
reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。的副作用，这通常在对浅引用的内部值进行深度变更后使用。代理对象，并返回该代理对象对应的原始对象。
2024-09-06 14:54:01
981
原创 Vue3中引用的组件如果使用了插槽，如何做到引用的组件不显示某些元素
某些场景中：比如vant的van-search组件；可以使用提供好的icon和按钮，也可以自定义配置；这样定义插槽就能更加灵活的配置，大家学会了吗。
2024-09-05 14:47:27
532
原创 Vue3组件通信概览
组件通信分为和通信树组件就是有直接关联关系的组件，比如：父子组件、祖孙组件跨组件没有关联关系的组件：在层级较深的组件调用顶级的组件，比如某个组件传值定义在App.vue里面的组件，比如全局弹窗组件。
2024-09-03 20:58:55
546
1
原创 vue3使用-watch监听总结
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
2024-09-01 13:33:34
3126
原创 Vue3使用computed计算属性方式总结
计算属性：需要对数据进行二次运算才使用，里面的值不变调用的话就使用缓存，除非里面依赖的数据项发生改变才会调用函数进行再次运算，依赖项可以有多个。
2024-08-10 20:51:10
486
原创 自己写个简单的vite插件
先在根目录建个plugins/vite-plugin-title-html.ts。在vite.config.ts里面引入自定义插件。
2024-07-07 10:39:54
505
原创 使用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
655
原创 vite常识性报错解决方案
原因：当你尝试从一个以 .ts 结尾的路径导入文件时，ESLint 可能会报告这个错误，因为它期望导入的是 JavaScript 文件（.js 或 .jsx）而不是 TypeScript 文件（.ts 或 .tsx）原因：因为项目里面使用ESModule的写法，但运行的环境又是Nodejs，虽然Nodejs支持ESModule,但默认不处理ESModule语法。：(导入的语法要显示的声明.js或.mjs，不然会报语法错误)解决办法：在项目根目录tsconfig.json文件新增。
2024-06-08 20:16:16
1397
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
2924
1
原创 使用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
485
原创 Vue3里面的setup上下文应用示例
插槽（非响应式的对象，等价于 $slots)：defineSlots 用于声明组件内部的命名插槽，该API是在 < script setup> 里使用的。这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。-props的进阶版，相当于props + emit：需要vue3.4+版本。defineProps：父组件传过来的值进行类型验证。中声明组件选项，而不必使用单独的。父组件：关键代码，其它的跟上面一样。子组件：修饰符验证方法1。子组件：修饰符验证方法2。-暴露公共属性（函数）
2024-05-21 14:38:12
627
原创 React里面useMemo和useCallBack的区别
useCallBack计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 useState 的变化，整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。useMemo缓存的是二次计算的数据，主要用于缓存计算结果的值，跟vue里面的computed大致相同的作用，这样避免组件重新渲染的时候，再重新执行整个函数，导致之前的二次计算也会重新执行一次。都是依赖数据发生变化，才会去更新缓存数据。
2024-05-21 13:26:02
884
原创 Vue3的setup系列篇之defineEmits和defineProps使用方式
defineEmits：触发事件（函数，等价于 $emit)defineProps：父组件传过来的值进行类型验证。
2024-05-21 13:22:28
540
原创 Vue3的watchEffect、watchPostEffect、watchSyncEffect
flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。不需要再指定需要依赖的值，会自动追踪依赖的值。
2024-05-20 12:05:32
384
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
892
原创 Vue2和Vue3重置响应式数据
Vue2我们提交表单后，想把表单数据重置到初始是不是这样？Vue3表单初始化就有很多方法，介绍其中一种。可以这样，就节省很多代码。
2024-05-16 16:25:54
471
原创 Vue3选项式和组合式生命周期说明
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
2024-05-16 13:30:42
1219
原创 Vue3组合式响应式数据
number、boolean、string等等使用的方式都跟下面类似；底层实现响应式也是对象，有兴趣的朋友可以去看源码。reactive(attr)只能把Array、Object等了类型作为实参,不能传入基本数据类型。
2024-05-15 13:40:26
518
原创 react组件渲染性能优化之函数组件-useMemo使用
useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值。应用场景如：需要进行二次计算的状态。中的计算属性），由于函数组件一旦重新渲染，就会重新执行整个函数，这就导致之前的二次计算也会重新执行一次。，某些时候，组件中某些值需要根据状态进行一个二次计算（类似于。
2024-05-14 09:54:08
569
原创 react组件渲染性能优化之函数组件-useCallback使用
比如：UseCallBackOptimize组件传递了一个事件函数给ChildCom2、ChildCom3，只要其中一个子组件调用这个事件就会影响到另一个子组件重新渲染一次,useCallBack(fn, dependencies) ：fn想要缓存的函数，dependencies有关是否更新 fn 的所有响应式值的一个列表。,useCallBack这个Hooks主要是解决React.memo不能。，但解决不了传递事件的问题。，两个子组件什么都不变的。
2024-05-14 09:49:39
750
原创 react组件渲染性能优化之函数组件-memo使用
的状态时，子组件也会跟着更新，原因很简单，因为父组件更新了，那你子组件当然要重新更新。React.memo只做浅比较，比如修改数组的话，子组件不会更新。，如果你想要控制这个过程，请在第二个参数里面写上你自己的控制流程。你需要对原数组进行深拷贝，然后再赋值给原数组。属性并没有变化，因此子组件不会更新。React.memo只会对对象做浅比较。传递给子组件，此时我们修改。时，由于传递给子组件的。
2024-05-12 14:56:14
556
原创 使用React高阶组件
高阶组件英语全称为 Higher-Order Components，简称 HOC，所谓高阶组件，是 React中一种复用逻辑的技巧。简单示例:比如说现在有个餐厅，餐厅有固定餐牌，客人点了什么直接输入序列号，餐厅获取客人的餐桌号和点的餐单等信息,价钱也不一样。，高阶组件作为一个函数，接收你传入的组件，然后又返回一个新组件给你。
2024-05-09 11:27:34
468
原创 Vue2组件的data为什么是函数，而不是对象
组件实例 data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data(组件在创建的时候，源码会进行选项合并，会对定义的data进行数据校验，如果不是function，则出现警告)，产生数据污染。采用函数的形式，initData 时会将其作为工厂函数会返回全新 data 对象。根实例对象可以是函数也可以是对象(根实例是单例)，不会产生数据污染。data使用函数形式就不会造成数据污染。data是对象，数据之间会共用、污染。以下为个人见解，仅供参考。
2024-05-08 14:14:48
574
原创 JS各种概念
在前端开发中，常用的模块化方案包括CommonJS、AMD（Asynchronous Module Definition）、CMD（Common Module Definition）和ES6 Modules等。/纯函数（Pure Function）：一个纯函数的输出只取决于输入参数，不会改变任何外部状态或产生副作用。高阶函数（Higher Order Function）：能够接受函数作为参数或返回一个函数的函数。颗粒化（Currying）：将接受多个参数的函数转换为一系列接受单个参数并返回新函数的过程。
2024-05-08 14:00:14
463
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人