qq_42241862的博客

早就听说，React社区，已经全面拥抱Hook。Vue3的发布也支持了自定义Hook，作为只会Vue的前端小码农自然要去看看Vue3 Hook到底是啥黑魔法？个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com从不了解React Hook的角度来看一下啥是Hook？Vue 官方给出的自定义 Hook 的例子是这样的：import { ref, onMounted, onUnmounted } from "vue";export function useMous

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com近段时间做一个编辑器，就需要一个鼠标拖拽选区的功能，方便批量选中元素，进行相应操作，所有就有了这篇文章。效果展示建立选区组件1、要想选中元素，肯定要先建立选区根据两个坐标点确定选区位置，并绘制出选区根据两个坐标删除选区的宽与高let size = computed(() => { let width = props.endPoint.x === 0

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com说一点废话复制网页上的二维码，并分享到的聊天工具中,是特别常见的功能。在网上找了很多资料，大部分都是坑。解决思路使用 navigator.permissions api查询浏览器是否支持粘贴板操作使用fetch 请求二维码 文件流将文件流转化为blob使用navigator.clipboard.write 将文件blob写入粘贴板未解决的问题粘贴板在不安全的环境中会有限制，可能导致复制失败。建议在ht

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com通过post获取文件流，并从中获取到文件信息。fetch API获取放在Content-Disposition的文件信息需要后端跨域支持，不然会出现，响应头为空的情况,从而得不到文件信息。附源码 /** * 获取文件流，并获取响应头中的文件信息，需要后端跨域支持 */ async downloadFile(url, params) { const request = {

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com组件API：TigerUi：http://tigerui.xkongkeji.com效果图结构<template> <div :class="['ti-loading', 'ti-' + type]"> <div class="loader-inner"> <div class="loader-line-wrap">

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com什么是socket.ioSocket.IO 是一个封装了 Websocket、基于 Node 的 JavaScript 框架，包含 client 的 JavaScript 和 server 的 Node。其屏蔽了所有底层细节，让顶层调用非常简单。另外，Socket.IO 还有一个非常重要的好处。其不仅支持 WebSocket，还支持许多种轮询机制以及其他实时通信方式，并封装了通用的接口。这些方式包含 Adobe Flas

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com一句话的图解：实例对象的隐式原型指向构造函数的的原型对象什么是prototypejavascript只有函数默认拥有prototype属性，由构造函数构造出来的实例默认是不具有扩展的，除非手动给这个实例加上扩展（当然这已经不是prototype了，仅是一个名叫prototype的属性而已）。在JS里，万物皆对象。方法(Function)是一个对象，方法的原型(Function.prototype)是对象。

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com在 Web 安全领域中，XSS 和 CSRF 是最常见的攻击方式。接下来就简单的说一下他们该怎么防范。什么是XSSXSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。XSS攻击的防范现在主流的浏览器内置了防范 XSS 的措施，例如 CSP。但对于开发者来说，也应该寻找可靠的解决方案来防止 XSS 攻击。

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comEventLoop出现的目的js单线程众所周知js是单线程的，那为什么是单线程嘞，作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？单线程解决方案单线程就意味着，所有任务需要排队，前一个任务结束，才

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com1、不要在生命周期函数上使用箭函数created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或

vue提供了三种插槽：匿名插槽，具名插槽，作用域插槽个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com匿名插槽子组件定义了solt，但未提供名字，这就是匿名插槽，也叫做默认插槽，只要出现的父组件中，未指定插槽名字的内容，都会默认放到匿名插槽里。子组件<template> <div> <slot><slot>//匿名插槽 </div></template>父

vue中的依赖注入 provide 和 inject个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comvue中的依赖注入 provide 和 injectprovide 选项允许我们指定我们想要提供给后代组件的数据/方法。下面是一个组价刷新的案列<template> <div > <div class="view"> <router-view v-if="isRouterAlive">&lt

浅谈method，computed，watch的区别只要使用过vue的基本对三者都有一点的了解，基本用法就不说了。method（方法调用）页面数据每次重新渲染时都会重新执行，性能消耗大，如果你不希望有缓存，请用方法来替代。computed（计算属性）计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。watch（侦听属性）监听到数据变化的时候就会执行还属性的回调函数。当需要在数据变化时执行异步或开

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comcall、apply、bind详解三者都是改变函数执行时的上下文，也就是就是改变this的指向。call(obj,arg1,arg2) //call()的参数一个一个的传函数.call(第一个参数:想让函数中this指向谁,就传谁进来,后面的参数:本身函数需要传递实参,需要几个实参,就一个一个的传递即可);call的作用: 1. 调用函数 2.指定函数中this指向apply(obj,[arg1,arg2] /

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comES6异步解决方案PromiseParmisePromise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都

常用的三种模块化规范个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comES6Moudle使用import/export语法，在文件顶部导入需要的模块，特点是：静态化，在编译时候确定模块之间的以来关系，以及输入输出变量。ES6 中 export 和 import 一般的用法有两种 （别名使用as关键字）命名导出（Named exports）默认导出（Default exports）ES6Moudle 在语言标准的层面上，实现了模块功能，而且实现得相当简