Web Worker 和 Service Worker 都是现代浏览器提供的用于提升性能和功能的技术，但它们在用途、功能和应用场景上存在明显差异。以下是两者的主要区别：

# 前言

作为前端开发我们可能了解到 Hooks 最多都是在 React 或者 Vue 中，但是在编程领域， Hooks 是一个通用术语，通常指的是允许开发者在特定时刻插入自定义代码或逻辑的一种机制。 Hooks 的概念广泛应用于多种场景和技术中，比如在前端框架、后端框架、操作系统、游戏开发引擎等。

但是 Hooks 在我们前端开发领域中还是赋予了一些特定的意义，它是一种更灵活和模块化的方式来编写组件逻辑，可以更好地复用和组织代码。它们使得组件的逻辑更加简洁、模块化和易于维护。

官方文档：https://www.tslang.cn/docs/handbook/decorators.html

这个东西在 java 里叫注解，不过在 ts 中，一个装饰器对应一个方法

# 背景

随着 vue3 的逐渐成熟，公司项目逐渐会存在 vue2 和 vue3 项目共存的情况，兼容 vue2 和 vue3 的公共组件开发能让老项目较好地过渡到 vue3。研究了 vue-demi 的源码和 demo，发现 vue-demi 只是简单地根据 vue 版本生成对应的类似中间件的东西，而且 render 函数也只是做了简单的中转处理；

国外大佬写了一个 vue-demi 解决了 vue2/vue3 的 render 函数 attrs 属性的问题，这里我就直接贴 issue 链接，不做过多说明了： github.com/vueuse/vue-…

虽然 vue-demi 没有提供 sfc 的兼容方案，但是其实仔细想一下，sfc 的解析处理也不应该是由 vue-demi 来解决，应该是交给打包工具将 template 转成 render，而 vue-demi 只需要关注 composition-api 就行；于是往着这个思路，花了几天时间研究一下 vue2.6、vue2.7 和 vue3 的 sfc-compiler，得到以下开发方案。

# 一、pinia 详细用法

# （1）安装 pinia

yarn add pinia

# 或者

npm install pinia

# （2）创建状态仓库

• 先得知道 pinia 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字
• defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。

element-ui 弹窗的 this.$confirm 框报错 Uncaught (in promise) cancel

这是因为你点击了取消或者是关闭弹窗，但是你没有写 catch。

element ui 的 el-tree 文字显示不全有三种解决办法：

• 方法一： 最简单的设置横向滚动条
• 方法二： 添加拖拽条改变外层容器宽度
• 方法三： 通过... 表示 鼠标移上去显示全称

# 谷歌浏览器 network 请求时间分析！

谷歌浏览器 network 请求时间分析及优化方法:

network 工具功能强大，能够让我看到网页加载的信息，比如加载时间，和先后顺序，是否是并行加载，还是堵塞加载。

<font color=#0099ff size=3> 快捷键 </font>

ctrl+1 一级标题 

ctrl+2 二级标题 

····

ctrl+shift+o 有序列表

ctrl+u 无序列表

ctrl+g 插入图片

ctrl+l 插入超链接