- 博客(28)
- 收藏
- 关注
RSS订阅原创 interface和type的区别
适合于定义复杂的类型操作和类型别名，更适合用于描述数据形状（对象、联合、交叉等）以及高级类型。还可以包含可选属性、只读属性、函数类型、索引签名、继承等等。更适合用于描述对象的结构和行为，以及实现接口的继承。都用于定义自定义类型，但它们在某些方面有一些区别。在 TypeScript 中，当用于定义对象的结构和约束时，的接口，它约束了对象具有。属性，并指定了它们的类型。关键字定义了一个类型别名。在上面的示例中，我们使用。关键字定义了一个名为。在这个示例中，我们使用。除了上述基本的结构定义，示例具有相同的效果。
2023-08-03 09:26:20
125
原创 【无标题】
1、类型断言 as2、非空断言3、可选链4、?? 和 !! 的作用5、字面量类型、字面量推理6、什么是类型缩小？7、TpeScript的函数类型8、函数：可选参数、默认参数、剩余参数
2023-08-02 14:04:37
105
转载 webpack性能优化---------------详解
第三种分包的模式是splitChunk，它底层是使用SplitChunksPlugin来实现的：因为该插件webpack已经默认安装和集成，所以我们并不需要单独安装和直接使用该插件；只需要提供SplitChunksPlugin相关的配置信息即可；1.Webpack提供了SplitChunksPlugin默认的配置，我们也可以手动来修改它的配置：比如默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all；2.SplitChunks自定义配置解析。
2023-07-16 16:22:58
807
转载 JS事件循环机制(EventLoop)
/语句一 console . log(1);//语句二 setTimeout(() => {} , 1000);//语句三 console . log(3);//执行结果为1，3，2原因是JS引擎指向代码是从上往下执行的，首先会执行语句一。JS引擎会将语句一放在调用栈当中，然后执行代码，在控制台输出1，当语句一执行完毕后，便将其从调用栈中移出去。接着语句二进入调用栈，语句二会调用Web API,1秒后进入回调队列，此时JS引擎将语句二移出调用栈，继续执行后面的代码。所以控制台输出了3。
2023-07-15 16:56:42
152
转载 pinia和vuex的区别
https://blog.csdn.net/m0_67948827/article/details/127208880
2023-07-15 15:57:20
313
原创 Vue2 ----组件通信
从语义上来看，v-model 绑定的值是指这个组件的绑定值，比如 input 组件，select 组件，日期时间选择组件，颜色选择器组件，这些组件所绑定的值使用 v-model 比较合适。ref 这种方式，就是获取子组件的实例，然后可以直接对子组件的方法和访问操作data的数据，就是父组件控制子组件的一种方式，子组件想向父组件传参或操作，只能通过其他的方式了。.sync 从功能上看和 v-model 十分相似，都是为了实现数据的“双向绑定”，本质上，也都不是真正的双向绑定，而是语法糖。
2023-07-15 14:40:52
109
1
原创 Vue2中$nextTick
就是说此次数据变化,在接下来的相关dom节点渲染完毕之后,所有需要依赖目标dom节点数据进行的业务逻辑或功能可写在此处.dom渲染是异步任务,数据变化完毕立刻执行与目标dom节点相关的操作,可能会失败,因为同步执行时目标dom节点还未渲染完毕.父组件改变id,如果直接调用子组件的方法(子组件此时发请求不会拿到对应的数据,因为数据更新是dom还没有更新),此时就需要用到$nextTick。$nextTick就是在下次DOM更新循环结束之后执行延迟回调。1.父组件调用子组件的方法,实现数据回显。
2023-07-15 11:36:24
154
1
原创 Vue2中$set的使用
*使用场景:**启用表格的的行内编辑模式时,要在表格数据的基础上额外设置一个新的属性,这个新的属性不具备响应式(能在控制台打印出来,但视图去没有更新),此时就需要用到this.$set()**将要设置的值:**对于在初始化data时已经设置的值，当我们改变他们的值，可以触发视图更新，但是新增的属性却无法被追踪到并触发视图更新。this.$set(想要改变的数组/对象,将要设置的属性,将要设置的值)解决数据没有被双向绑定,什么时候双向数据绑定失效什么时候使用$set。
2023-07-15 11:20:40
460
1
原创 Object.defineProperty与Proxy理解整理
Object.defineProperty() 和 ES2015 中新增的 Proxy 对象,会经常用来做数据劫持.数据劫持:在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果.数据劫持最典型的应用------双向的数据绑定(一个常用的面试题),Vue 2.x 利用 Object.defineProperty()，并且把内部解耦为 Observer, Dep, 并使用 Watcher 相连Vue 在 3.x 版本之后改用 Proxy 进行实现。
2023-07-14 23:04:21
161
1
转载 js中set的使用
如果一个数组有重复的元素，使用Set就能很快去除重复的元素。当然，用之前的方法也是可以去重的，先看之前怎么实现去重的，再学习使用Set怎么去重。区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收。delete(value)：从set中删除和这个值相等的元素，返回boolean类型；可以看到Set中只有3个值互不相同的元素，而Array数组中有4个元素。可以看到两种方法都创建了4个元素的Set，并且对象也是可以作为元素的。
2023-07-14 22:05:47
924
1
转载 如何理解响应式网站？
简单来说就是你页面的样式布局，会随着页面视口的大小进行自动匹配，我们知道不同的设备拥有不同屏幕大小即视口(viewport)，那么我们不可能一个样式适应所有的屏幕大小，那么响应式解决的就是网站自动去识别不同屏幕，然后去使用对应的样式去适应屏幕。CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一与百分比布局很相似。
2023-07-14 21:14:22
31
1
原创 一个封装了支持下标为负数的数组
对象支持使用负数索引访问和修改数组元素，同时保留了正常数组的功能。该构造函数定义了一些方法来操作这个数组。方法获取索引为0和-1的元素，以及使用。在上面的示例中，我们创建了一个名为。方法设置索引为-2的元素。的构造函数，它封装了一个内部数组。在上面的示例中，我们创建了一个。方法向数组中添加元素。
2023-07-11 18:19:19
60
1
转载 VUE中的mixins
在开发前端项目的时候，经常会遇到这样一种开发场景：多个模板页中应用的组件或者页面布局非常相似，比如较为熟悉的el-dialogel-tooltip和el-table等页面布局。这时候就会考虑：是把它们拆分成多个不同的组件呢？还是只使用一个组件，创建足够的属性来改变不同的情况。这些解决方案都不够完美。如果拆分成多个组件，就不得不冒着如果功能变动你要在多个文件中更新它的风险。另一方面，太多的组件会很快变得混乱，难于维护，甚至对于组件开发者自已而言，也是件难事。在Vue。
2023-07-11 17:41:32
555
1
原创 三分钟掌握ref reactive computed define props define emits 的类型注解
类型注解的作用:限制变量赋值的数据类型 并 给出提示类型注解的语法:变量：类型1.ref函数类型2.reactive函数类型3.在实际工作中的推荐 ：推荐使用ref函数，减少记忆负担3.computed函数类型2.利用 TS 类型推导的能力（推荐）之前的:父传子，把props传递给子组件内部使用。可以通过defineProps来接收defineProps配合vue默认语法进行类型校验（运行时声明）配合TS使用defineProps配合ts的泛型定义props，这样更直接。
2023-07-11 17:15:22
236
1
原创 V3使用Vant4组件库----实现自动按需加载
1.安装: pnpm add unplugin-vue-components -D。2.配置，vite.config.ts。
2023-07-11 16:15:03
621
1
原创 js-递归实现原理 详解
递归在解决一些具有递归结构的问题时非常有用，例如树遍历、阶乘计算、斐波那契数列等。但是需要注意，递归可能会消耗大量的内存和计算资源，因此在使用递归时应特别关注终止条件的设置和递归调用的方式，以避免出现无限递归和性能问题。它可以通过将一个大问题划分为更小的、相同结构的子问题来解决复杂的任务。在递归过程中，函数会重复调用自身，直到满足某个终止条件，然后通过将每个子问题的解合并起来，得到最终的解。斐波那契数列的前几项如下所示：0, 1, 1, 2, 3, 5, 8, 13, 21, …
2023-07-10 19:12:17
168
1
原创 JS 数据类型性判断大全
Object.prototype.toString 是 JavaScript 中的一个方法，用于获取一个对象的字符串表示形式。它返回一个表示对象类型的字符串，格式为 [object ObjectClass]。为了提取出具体的类型字符串，我们可以使用 slice 方法截取字符串，从第 8 个字符开始（去除 "[object "），直到倒数第 1 个字符（去除最后的 “]”）。JavaScript 中的数据类型判断,除了使用 typeof 操作符之外，还可以使用其他一些方法来更准确地判断变量的数据类型。
2023-07-10 17:25:59
43
1
原创 项目开发前配置ESLint
然后自动在.vscode目录下自动生成settin.json文件。按照下图操作,点击(在settings.json中编辑)上面的两句命令，如果不能成功，就一句一句运行。在settin.json加入一下代码。把鼠标放在单词上会自动显示解释。
2023-07-10 15:47:46
77
1
原创 vue3 基础知识点总结
开启deep的问题： 它会递归地处理处理所有的值，无论哪个属性被修改都会触发watch回调，这可能会导致不必要的浪费。问题: 如果要定义很多的数据，在模板中使用，那是不是要：1. 定义很多个数据。通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep。注意: 1. 普通对象不是响应式的，可以正常访问，但是，不具备响应式的特点：修改数据之后，视图不会更新。侦听一个或者多个数据的变化，数据变化时执行回调函数。生命周期函数执行多次的时候，会按照顺序依次执行。
2023-06-29 23:03:47
118
1
原创 数组扁平化
concat() 方法是 JavaScript 中用于连接两个或多个数组的方法，返回一个新的数组，原数组不会被改变。该方法可以接收任意数量的参数，每个参数都可以是数组或者值。需要注意的是，如果要连接的元素本身是一个数组，则会将该数组作为单独的元素添加到新数组中，而不会递归地将其展开。需要注意的是，flat() 方法默认只会将数组扁平化一层，如果需要完全扁平化，可以传入 Infinity 参数。这种方法使用递归函数遍历数组的每个元素，如果该元素也是一个数组，则继续递归处理。否则将其添加到扁平化后的数组中。
2023-06-10 21:27:52
37
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人