- 博客(45)
- 收藏
- 关注
RSS订阅原创 一文让你搞懂async/await存在时的执行顺序
最近在写项目，发现代码中总出现这样的内容，一直百思不得其解，后来同事说这段代码的意义是把后边的任务变成宏任务执行，这我更迷惑了，我发现自己的Promise基础还是很差，因此在摸索了几天后，基本上搞懂了基本原理，特此记录。
2023-09-28 15:55:29
2494
2
原创 Vue中为什么有时候获取不到props？
在Vue中，props是从父组件流向子组件，在子组件的mounted及之前的生命周期钩子中，子组件只能接收到父组件的第一次props，如果父组件的props改变了，那么子组件在以上这些生命周期钩子中是接收不到的，那么最好的解决办法当然就是在子组件中采用watch来侦听peops的变化。
2023-08-23 14:00:04
1839
转载 await Vue.nextTick() 的含义分析
本文转载自：(/≧▽≦/)馒头加梨子！原博客内容如下：今天看别人的单元测试代码的时候碰到了一段代码，初看起来不是很懂，后来通过查资料弄懂了，记录下来，供以后开发时参考，相信对其他人也有用。
2023-08-22 15:14:29
682
原创 async/await把异步变同步的原理
首先我们来看一段代码，你觉得这段代码的执行顺序是什么呢？这段代码的输出顺序是：1. "calling" （调用asyncCall函数时打印出来）2. "B" （在asyncCall函数调用期间打印出来）3. "resolved" （resolveAfter2Seconds函数中的Promise在2秒后被解决，await关键字等待解决并返回结果）4. "A" （在await表达式之后打印出来）
2023-08-22 10:10:21
336
原创 min-height到底是什么？
如果我有一个盒子A，A设置了min-height的高度为200px；并设置了overflow：auto，那么如果里面的内容超过了200px，他会出现滚动条吗？因为如果是这样的话，那么这个盒子其实就是没有高度的，如果该盒子有子元素，那么子元素设置高度的时候，没法继承父元素的高度。如果内容小于盒子高度，则最终高度为盒子高度；如果内容大于盒子高度，那么盒子会被内容撑开变大。答案是：不会，案例如下。那如果解决这种问题呢？
2023-08-21 10:42:40
1384
原创 解决keep-alive缓存失效问题【必看！！！】
vbenjs/vite-plugin-vue-setup-extend - Vite 中文文档 (viterc.cn)2）使用vite-plugin-vue-setup-name-support插件，这个插件是用来解决。Vue3中的setup语法糖中的name命名无效。即：如果你是按如下写组件的name，是不起作用的。1）手动写一个script标签，然后默认暴露名称。语法糖中无法给组件命名的缺陷。
2023-08-16 09:12:14
1250
原创 【npm run dev报错】无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。
无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。- 前端知然 - 博客园 (cnblogs.com)2.输入命令：set-executionpolicy remotesigned。1.win+X键，使用管理员身份运行power shell。3.输入”Y“,回车，问题解决。
2023-08-13 14:45:33
721
原创 flex:1盒子的内部盒子高度不可设置为100%
如图，设置一个盒子的宽高为200px，第三个盒子设置为flex：1，效果如下可以看到第三个盒子会自动占据所有的空间，如果内容过多，则高度会更大，但是超出部分会隐藏，此时我们可以设置overflow：auto使其出现滚动条那么问题来了，我们把代码更改如下：如果此时我在第三个盒子里又放一个子盒子，然后设置子盒子的高度是100%，并且设置overflow：auto，那么子盒子的高度和父盒子是完全一样的，如果当内容超多，不也是会出现滚动条吗，但是事实却不是这样，而是直接显示出来了。
2023-08-07 14:23:26
1449
原创 前端为什么发请求没有携带cookie？
在前端发送请求时，如果想要携带 cookie，通常只能携带存储在与请求域名相同路径的 cookie。这是由浏览器的同源策略所决定的。同源策略要求请求的域名、协议和端口都必须一致，否则浏览器会限制跨域请求的权限。当浏览器发送跨域请求时，默认情况下不会自动携带 cookie，只有在以下两种情况下才会携带：目标域名设置了允许携带 cookie 的响应头（Access-Control-Allow-Credentials），并且请求的 origin 域名也在目标域名的白名单中。
2023-08-02 11:32:43
6464
1
原创 Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marking event han
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反：没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。
2023-07-27 11:40:58
2970
1
原创 for循环改变原数组（ 值引用和地址引用）
2）令bb={name:'李四'}，此时不会改变aa的值，因为创建了一个新的对象，并将该对象的引用赋值给了 bb。在vue2的data中定义一个对象，然后用计算属性得出一个newP，当改变了newP中的name，我们会发现原始数据person中的数据也发生了改变，这就是因为共用同一个地址导致的。注：但是你不能这样写，this.newP={age:18}，因为这样相当于是要修改computed的值了，而修改computed的值是需要写set的，否则会报错。如果此时改变bb的值，则有两种情况。
2023-07-23 13:41:15
728
原创 contenteditable=“false“很有用哦~
当然，如果给元素设置了contenteditable="false"，也是有缺点的，这代表元素是不可编辑的，也就不可以通过querySelector等方法获取它，querySelector只能获取可编辑的元素。
2023-06-20 14:23:52
863
4
原创 Vue3中的组件间通信方式
通过props传递一个函数，子组件可以通过这个函数来改变父组件中的数据，这个我在vue中没遇到过，因此突发奇想的把组件间通信方式总结下，持续更新ing...如下，有两个组件，父组件和子组件，父组件中有个数据count，子组件接收到父组件的数据，并点击按钮改变父组件的数据，你会想到哪几种方法呢？上面这句话是Vue3官方语言，这告诫我们操作响应式数据尽量在供给方组件（父组件）中，但在很多情况下我们需要在子组件操作数据。最近学react，发现react中可以由。props传值就不墨迹了，大家都会！
2023-06-19 15:47:00
214
原创 在useAsynsState中使用el-tree的setCheckedKeys
我们知道，一般可以使用checkedNodesKeys来进行树形数据的回显，但是我发现这个方法有个坑，就是你一定要在树形数据回来之前调用，因为如果你在树形数据有了之后调用，那么他就会触发这棵树的check事件，如果你的事件中有push数据等方法，那么就会被调用一次。因此一定要在树形数据回来之前调用这个方法，按我的理解就是，先把keys存起来，等树形数据回来的时候，自然就会渲染上。
2023-05-30 20:44:02
872
原创 watch必须监听响应式的值
函数来监听一个非响应式的值，那么它将无法正常工作，并且会报错或产生意外行为。因此，确保你要监听的值是经过 Vue.js 包装成响应式对象的，这样才能够正确地使用。在 Vue.js 中，当一个响应式对象的属性发生变化时，它会自动触发更新。在这种情况下，Vue.js 会自动将该函数返回的值进行包装，并将其作为响应式对象来监视。不是响应式的，但由于你使用了一个函数进行监视，它最终被转换成了一个响应式对象，并可以正常工作。函数来监听这些变化，并在回调函数中执行相应的操作。的变化，并在回调函数中执行相应的操作。
2023-05-25 09:35:49
1373
原创 elementUI中的form-item表单使用了v-show进行隐藏，那么提交表单进行表单验证的时候，还会验证这个表单吗
表单元素时，该表单元素仍然会被渲染到 DOM 中，因此在提交表单时，该元素的验证依然会被触发。元素时，它不会被渲染到 DOM 中，因此在提交表单时也不会进行验证。表单元素后禁用其验证，可以考虑使用。例如，下面的示例中，一个。
2023-05-23 10:09:30
3046
原创 如果在vue中插入了iframe，那么在vue中的style里写iframe样式为什么会不起作用
为了解决这个问题，可以尝试给iframe设置样式时，直接在HTML文件中添加CSS样式表进行设置，或者使用JavaScript代码来控制iframe的样式属性。另外，也可以通过父组件向子组件传递props，将样式属性传递给iframe，从而实现样式设置。当在Vue中插入了iframe时，如果在Vue组件的样式或者style标签中写iframe的样式，则有可能不起作用。这是因为iframe标签本身就是一个独立的HTML文档，它并没有继承父组件的样式。
2023-05-17 10:19:28
1378
原创 自定义el-tree组件中点击某行数据时高亮效果
如下所示，这是elementUI中的tree组件，当点击某行数据的时候会有背景色，但是当鼠标点击别处时，便失去焦点，背景色随之消失了。而我想要的效果是，当点击某行数据，高亮该数据，且一直不消失，当点击另一行数据时，高亮效果切换到点击数据。
2023-05-05 14:34:02
2243
原创 Could not find a declaration file for module ‘vue-json-viewer‘. ‘e:/工作资料/代码/workbench-admin/node_mod
因此，在使用第三方插件时，建议先查看其官方文档，了解其是否提供了类型定义文件，并确认自己的TypeScript版本是否支持该插件的最新特性和API。创建一个新的声明文件：如果找不到相应的类型定义文件，您可以手动创建一个新的声明文件来告诉TypeScript该模块的类型信息。插件作者没有提供类型定义文件：某些第三方插件可能并没有提供相应的类型定义文件，或者该插件的类型定义文件尚未更新到最新版本。类型定义文件导入路径不正确：有时候，您在ts文件中导入模块的路径可能与实际路径不符合，导致无法找到类型定义文件。
2023-04-25 09:47:17
1007
原创 postcss.config如何配置
它的作用是定义PostCSS要使用哪些插件以及这些插件应该如何运行和排序。在一个Vue项目中，如果要自定义PostCSS配置，可以创建一个名为。三个插件添加到PostCSS的插件列表中，并按照顺序依次运行它们。两个插件添加到PostCSS的插件列表中，并按照顺序依次运行它们。中进行额外的配置，因为默认情况下Vue CLI会自动加载。但是，如果你想覆盖默认配置或添加其他配置项，则可以在。的文件并导出一个包含所需配置的对象或函数。上面的代码中，我们覆盖了默认的。选项来实现自定义配置。上面的代码中，我们将。
2023-04-23 14:33:56
2880
原创 vue 如何实现多个路由共用同一个页面组件
那么它会触发哪几个钩子函数呢？当多个路由公用同一个组件时，会进行组件复用，只会更新数据而不会重新挂载组件实例。那么它会触发哪几个钩子函数呢？我们可以看出，当切换路由时，由于组件复用，mounted之前的钩子函数都不再复用，因此如果你是在mounted中或者之前获取数据的，解决办法如下：1、使用路由的onBeforeRouteLeave钩子函数我们再次切换路由进行打印我们发现，该钩子函数是会被触发的， 因此你可以选择在此处进行获取数据2、使用路由的key属性。
2023-04-23 11:19:05
4833
原创 useAsyncState和生命周期钩子的顺序
自定义 Hook 是一种抽象逻辑的方式，它通常会与组件的数据和逻辑进行解耦，从而提高代码复用性和可维护性。如果设置immediate：false，则该函数不会立即执行，可以设置手动调用execute来在任何地方进行执行。钩子中调用，会使得组件的数据和逻辑变得混杂不清。函数中调用，从而遵守 Vue 3 的设计原则，并能够实现可复用、可维护和高效的异步请求逻辑。函数中调用自定义 Hook，并将其返回值与组件的数据绑定起来，从而实现特定的功能。钩子中调用，就违背了 Vue 3 的设计原则。
2023-04-20 16:45:52
315
原创 try...catch 语句解决程序崩溃
当程序执行 try 语句块时，如果没有发生异常，则直接跳过 catch 语句块，继续执行后面的代码；如果发生了异常，则会抛出一个异常对象，并进入 catch 语句块进行相应的处理。在 catch 语句块中，我们可以使用异常对象的属性和方法来获取关于异常的信息，并采取相应的措施，例如输出错误提示、修复错误、恢复程序状态等。在上述代码中，我们使用 try...catch 语句来计算变量 result 的值，如果除数 y 的值为 0，则会抛出一个异常，并被 catch 语句块捕获。
2023-04-20 14:14:16
607
原创 webpack.config.js中webpack和webpack serve --open的区别
webpack和都是运行Webpack进行构建的命令，但它们的区别主要体现在两个方面：用途和功能。
2023-04-16 21:49:14
313
原创 vue3中的watch和created钩子哪个先触发
选项时，可能会出现一些问题，因为监听器回调函数的执行时机与其他生命周期钩子不太相同。在组件初始化时，Vue 会先创建和挂载组件实例，然后才会开始监听数据的变化。监听器则是用来监听数据变化的，当指定的数据发生变化时，会触发对应的回调函数。选项时，它将会在初始绑定时立即执行回调函数，并且接收到初始值。选项的作用是告诉 Vue 在首次绑定时就要立即调用监听器函数。监听器会在下一次数据更新时被触发，而不是在组件创建期间。选项，那么该监听器会在组件创建期间立即被调用。钩子会在组件实例被创建后立即调用。
2023-04-13 17:24:28
838
原创 递归遍历删除对象中的key
如何通过遍历删除该对象中的createBy、updateBy、createTime、updateTime、scheduleId、delFlag的值。可以通过遍历对象的属性，判断属性名是否为需要删除的属性名，然后使用 delete 操作符删除该属性。
2023-04-11 11:28:22
288
原创 vue中的路由自己跳转自己可以吗
需要注意的是，为了避免无限循环跳转问题，这种方法应该谨慎使用，并且在使用前最好添加一些条件判断，如判断是否已经处于当前路由等，以确保不会出现无限循环跳转的情况。在 Vue 路由中，自己跳转自己是允许的，但不建议这样做，因为会导致无限循环的路由跳转，从而导致页面卡死或崩溃。会把当前路由加入到路由栈中并执行一次路由跳转，达到重新加载页面的目的。如果要实现类似于点击一个按钮或链接后重新加载当前页面的效果，可以使用。方法会强制刷新当前页面，而。
2023-04-10 19:07:56
1171
原创 如果从不同的页面进入同一个页面，并通过路由传参，那么这个页面会重新挂载吗
如果你从不同的页面进入同一个页面，并通过路由传递参数，这个页面的组件只有在传递的参数发生变化的情况下才会触发重新渲染，否则不会重新挂载。的变化会强制触发组件重新渲染。但是需要注意的是，这样做可能会导致性能下降，所以要谨慎使用。如果你希望在每次路由切换时都能重新挂载组件，可以使用。会每次在路由发生变化时变化，而。来强制重新渲染组件。
2023-04-06 15:45:33
217
原创 el-tree中，我每次点击按钮，我用loaded = false，expand()来重新获取懒加载的数据，但是这样就会触发所有选中按钮的取消事件，把我选择的内容都清空掉了，这样怎么解决
在做项目过程中，我采用的是 check-change来设置el-tree的点击事件，但是 每当重新获取懒加载的数据时，其实这棵树的懒加载数据相当于重生成了，因此重新生成的数据身上是没有选择状态的，而此时就会触发 check-change的取消勾选事件，如果取消勾选事件身上有删除对应数据的操作，那么对应选中的数据也会被删除。
2023-04-03 14:40:58
554
原创 Vue3中的watch那些坑
/情况四：监视reactive定义的响应式数据中的某个属性,不可以直接写成person.job，必须写成一个函数形式()=>person.job。},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效。console.log('person的job变化了',newValue,oldValue)console.log('person的job变化了',newValue,oldValue)//情况五：监视reactive定义的响应式数据中的某些属性。
2023-03-26 15:33:28
300
原创 高内聚低耦合，充分解耦业务代码的复杂性，可读性更高
充分解耦业务代码的复杂性是指将业务逻辑分解成更小的、更易于理解和维护的部分，从而降低代码的复杂度。高内聚低耦合是一种编程原则，它的目的是提高代码的可读性和可维护性。它可以将业务逻辑分解成更小的、更易于理解和维护的部分，从而降低代码的复杂度和耦合度。高内聚低耦合和充分解耦业务代码的复杂性可以提高代码的可读性和可维护性。低耦合是指模块或类之间的依赖关系尽可能的少，它们之间的接口简单明了，并且不会互相影响。高内聚是指模块或类的各个部分之间具有紧密的关联性，它们共同完成一个特定的任务或目标。
2023-03-26 14:44:59
327
原创 vue中的useAsyncState
并不是Vue.js的原生API，而是一些第三方库提供的自定义hook，用于简化在Vue组件中处理异步状态的逻辑，其具体实现方式可能因库而异。函数，将异步状态变量包裹在一个响应式对象中，并提供一个触发异步操作的方法。这个方法会在异步操作开始时，将响应式对象中的。语句处理异步操作的结果，并在每个阶段更新响应式对象中的属性。在组件中，我们可以直接使用返回的。函数，来实现异步操作的渲染和交互。属性的响应式对象，同时提供一个。函数，用于触发异步操作。，异步操作结束后，将。，并根据操作结果更新。
2023-03-22 15:35:13
1069
原创 类型“string | string[]”上不存在属性“forEach”
上图已经说的很清楚了 因此可以在代码中加一个判断，当返回的是字符串时，直接return，如下。
2023-03-21 10:36:09
703
原创 关于ElementUI-Plus中TreeSelect组件不能自定义value的bug
从上图可以发现，该组件只能收集data中默认的value，即我自定义的:props="{value:'name'}"根本就没用，也就是时候以后如果用该组件，并且想收集某一项数据，就只能把data中想收集的数据改成value:'xxx'，不知道大家有没有好的办法。最近在做树形可选组件，用到了el-tree-select组件，但是发现这个组件好像不能自定义value，百思不得其解，希望得到大家解答。
2023-03-19 21:46:42
1641
13
原创 data.includes is not a function
但是我们写在table里是 :data=data，少些了records这种的。查了好久才知道是数据包裹的问题，比如后端给的数据的data.records。
2023-03-17 13:33:09
7020
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人