闲暇随笔1

1.0 浏览器复制内容到剪切板

2.0 GET 和 POST 方法的区别：

1、发送的数据数量
在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。
在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。
2、安全性
GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。
3、加入书签中
GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。
4、编码
在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。
在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。
5、可变大小
GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。
6、缓存
GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。
7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。

3. 0 vue3 路由传参

路由的传参方式一共有两种，一种是query，另一种是params。
query参数会在URL显式存在，params一般不会出现在URL上（动态路由除外）；
query传参可以和path属性一起使用，params不能和path属性一起使用，只能和name属性一起使用；
params传参在刷新页面时会参数丢失（动态路由不会），而query传参不会有这种情况。

 router.push({path:'/home',query:{a:1,b:2}})      // 路由跳转地址 http://localhost:8080/home?a=1&b=2
 route.query    // 取值 {a:1,b:2}

 router.push({name:'home',path:'/home',params:{a:1,b:2}}) // 路由跳转地址  http://localhost:8080/home
 route.params   // 取值 {a:1,b:2}  页面刷新后, 参数丢失

 const routes = [{path:'/',component: index},{path:'/home/:a/:b',component:home}] // 动态路由配置
 router.push({name:'home',path:'/home',params:{a:1,b:2}})  // 动态路由跳转地址 http://localhost:8080/home/1/2
 route.params  // 动态路由传参取值 
 
 // 注意 vue-router 4.14版本删除了未使用的params 意味着使用params传参,高于4.14版本的vue-router接收不到传参(动态路由除外)

4.0 路由导航解析过程

导航被触发；
在失活的组件里调用beforeRouteLeave守卫；
调用全局的beforeEach守卫；
在重用的组件里调用beforeRouteUpdate守卫；
在路由配置里调用beforeEnter守卫；
解析异步路由组件；
在被激活的组件里调用beforeRouteEnter守卫；
调用全局的beforeResolve守卫；
导航被确认；
调用全局afterEach钩子；
触发dom更新；
调用beforeRouteEnter守卫中next的回调函数，创建好的组件实例会作为回调函数的参数传入。

5.0 网页优化

<img src="https://www.ld-seo.com/uploadfile/images/637f0862951e21669269602.jpg" alt="" loading="lazy">   // loading="lazy" 延迟加载图像 
<link rel="preload" href="critical.js" as="script"> // 预加载资源 preload
<script src="file.js" defer></script> // async和defer不同之处是async加载完成后会自动执行脚本，defer加载完成后需要等待页面也加载完成才会执行代码
// 压缩图片大小, 如使用webp格式图片
cdn加速/开启gzip压缩/前端缓存

代码分割
import { defineAsyncComponent } from 'vue'
// 会为 Foo.vue 及其依赖创建单独的一个块
// 它只会按需加载
//（即该异步组件在页面中被渲染时）
const Foo = defineAsyncComponent(() => import('./Foo.vue'))