1.git undo 跟 reverse区别
git undo操作----撤销已提交的更改。它可能涉及到使用诸如git reset和git commit命令的组合来撤销最近的提交，并将HEAD指针回退到之前的提交。会改变项目的历史记录，因为它实际上是在删除最近的提交，并用新的提交（可能包含相同的更改，但提交信息不同）来替代。因此，git undo通常用于在代码提交到公共仓库之前纠正错误。
git revert命令用于撤销某个特定的提交，但保留该提交的历史记录。revert操作是创建一个新的提交，这个新提交的更改与要撤销的提交完全相反，从而“撤销”了原始提交的效果。这意味着项目的历史记录被保留下来，同时错误也被修复。在公共仓库中特别有用
总结来说，git undo和git revert的主要区别在于它们如何处理项目的历史记录。git undo通过删除和替换提交来撤销更改，而git revert则通过添加新的相反更改的提交来撤销特定的提交。选择使用哪个命令取决于你的具体需求，例如是否需要保留项目的完整历史记录。
2.前端实现大文件的切片上传
前端上传大文件处理（切片、断点续传）_大文件上传和断点续传切片-CSDN博客
3.http 与https 的区别是啥
HTTP（Hypertext Transfer Protocol，超文本传输协议）是一种应用层协议，它允许将超文本标记语言（HTML）文档从Web服务器传送到客户端的浏览器。然而，HTTP协议以明文方式发送内容，不加密，攻击者可截取浏览器和网站服务器间的传输报文，因此HTTP协议不适合传输一些敏感信息，比如信用卡号、密码等。
相比之下，HTTPS（Hypertext Transfer Protocol Secure，安全超文本传输协议）是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，主要通过数字证书、加密技术、身份认证技术保证了传输过程的安全性。HTTPS在HTTP的基础上加入了SSL层，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。因此，HTTPS协议需要CA证书，费用较高；而HTTP则无需任何证书，是免费的。
总结来说，HTTPS比HTTP更安全，可以防止数据在传输过程中被窃取或篡改，但实现成本也相对较高。
4. 对SSR校验、密文以及Web安全机制的理解
SSR校验、密文以及Web安全机制都是网络安全领域中重要的概念，它们各自在保护数据和系统安全方面发挥着关键作用。
- SSR校验：
- SSR（Server-Side Rendering，服务器端渲染）是一种用于Web应用的渲染技术。SSR在服务器端生成完整的HTML页面，然后发送给客户端进行展示。
- SSR校验指的是对服务器端渲染输出的HTML页面进行验证或检查的过程，以确保页面的正确性和安全性。检查页面结构、内容以及潜在的安全漏洞或恶意代码。
- 密文：
- 密文是通过加密算法将原始数据（明文）转换成的难以读懂或理解的格式。这种转换是为了保护数据的机密性，防止未经授权的人员读取、修改或篡改数据。
- 只有拥有相应密钥或解密算法的人员才能将密文转换回原始数据（明文）。
- Web安全机制：
- Web安全机制是指一系列用于保护Web应用免受各种攻击和威胁的技术和策略。这些机制旨在确保Web应用的完整性、机密性和可用性。
- Web安全机制包括但不限于：输入验证（如防止SQL注入、跨站脚本攻击等）、会话管理（如防止会话劫持、跨站请求伪造等）、加密通信（如使用HTTPS协议保护数据传输）、访问控制（如基于角色的权限管理）等。
综上所述，SSR校验、密文和Web安全机制都是确保网络安全和数据安全的重要组成部分。它们各自在不同的层面和场景中发挥作用，共同构建了一个多层次、全方位的安全防护体系。在实际应用中，需要综合运用这些技术和策略，以提高系统的安全性和防护能力。
5.冒泡算法的实现思路
每次循环比较两个数，都会把最大的数放到后面，把小的数交换到前面来，这就是冒泡排序的原理
var arr = [67, 23, 6, 5, 9, 1];
// 这个sort可以是冒泡排序也可以是选择排序或者其他排序。
function sort(arr) {
// 循环的圈数，从第一圈开始，到数组的长度(arr.length)圈结束
// 排6个数字，需要循环5次
for (var i = 1; i < arr.length; i++) {
// 循环数组，从数组下标0开始，到arr.length-i,
//这个i是循环的圈数，当第一次比较的时候，已经确定了最大的一个数
//所以为了提升效率，每次都比上一次少比较一次，即arr.length-i
for (var j = 0; j < arr.length - i; j++) {
// 比较 左面的大于右边的交换位置(升序)
if (arr[j] > arr[j + 1]) {
// 交换
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
console.log(sort(arr));
6.Scoped CSS的底层原理 Vue中scoped、>>>、/deep/、::v-deep的原理
将样式作用域限制在特定组件中的机制,通过给组件的根元素添加唯一的标识符【
data-v-hash】来实现的
深度作用选择器
>>>，示例：.gby div >>> #dyx p
/deep/，示例：.gby div /deep/ #dyx p或.gby div/deep/ #dyx p
::v-deep，示例：.gby div::v-deep #dyx p或.gby div::v-deep #dyx p原理基本一样，只是第3步有些不同（前2步一样）：
每个组件实例（注意：是组件的实例，不是组件类）生成唯一标识组件的标识符；
给该组件的根元素添加一个标签属性，格式为
data-v-hash标识：<div data-v-e0f690c0="" >；给组件的作用域样式
<style scoped>的每一个深度作用选择器前面的一个选择器增加一个属性选择器[data-v-实例标识]，示例：假设原选择器为.cls #id >>> div，则更改后的选择器为.cls #id[data-v-e0f690c0] div；因为Vue不会为深度作用选择器后面的选择器单元增加 属性选择器
[data-v-实例标识]，所以，后面的选择器单元能够选择到子组件及后代组件中的元素；
7.vue的相关问题-1.vue响应式原理 2.组件传值的方式 3.八个生命周期 4.keep-alive的两个生命周期 5.透传attribute 6.如何按需加载组件 7.setup和script setup有什么区别 8.谈谈你对组合式API的理解 (从为什么要引入组合式API来说，解决了什么问题)9.vue中的 defineComponent函数有什么用，为什么用
Vue的响应式原理是通过使用 Object.defineProperty() 方法或 ES6 的 Proxy 对象来监听数据的变化。当数据发生变化时，Vue会自动更新相关的视图。具体来说，Vue通过递归遍历所有的属性，将它们转换为 getter 和 setter，这样当属性被访问或修改时，Vue能够捕获到并触发相应的更新。
组件传值的方式包括 Props、事件、Vuex、以及 provide/inject。Props 是父组件向子组件传递数据的方式，事件是子组件向父组件传递数据的方式，Vuex 是用于在组件之间共享状态的集中式状态管理器，而 provide/inject 则是一种高级的传递数据方式，允许祖先组件向所有子孙后代组件注入依赖，而不需要显式地传递。
Vue组件有八个生命周期钩子函数，分别是：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
keep-alive 组件有两个生命周期钩子函数，分别是 activated 和 deactivated。activated 生命周期钩子函数在组件被激活时调用，而 deactivated 生命周期钩子函数在组件被停用时调用。这两个钩子函数可以用来执行一些在组件缓存时需要的逻辑。
透传 attribute 是指在 Vue 组件中，将父组件传递给子组件的 attribute 直接传递到子组件内部的 HTML 标签上，以实现对 HTML 标签的原生属性进行控制。
<!-- ParentComponent.vue --> <template> <!-- 使用子组件，并传递属性 --> <ChildComponent class="child" data-name="John" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent } }; </script> <!-- ChildComponent.vue --> <template> <!-- 子组件内部的标签会继承父组件传递的 class 和 data-name 属性 --> <div :class="$attrs.class" :data-name="$attrs['data-name']"> Child Component </div> </template> <script setup> // 在 script setup 中不需要额外导出 </script> 在这个例子中，父组件 ParentComponent 将 class 和 data-name 两个属性传递给子组件 ChildComponent，而子组件则透传这两个属性到内部的 div 标签上，实现了对标签的原生属性进行控制。按需加载组件可以通过 Vue 的异步组件或路由懒加载来实现。异步组件通过 webpack 的 code-splitting 特性实现按需加载，而路由懒加载则是通过将组件定义为函数返回一个 import() 调用，使得组件在需要时才会被加载。
setup函数是用来配置组件的函数，组件实例创建之前执行。在setup函数中，可以进行响应式数据的声明、生命周期钩子的定义、以及导出需要在模板中使用的数据、方法等。script setup是新的语法糖，它整合组件的逻辑和模板，自动执行常见的设置，如响应式数据的声明和生命周期钩子的定义更简洁地编写组件，使得逻辑更清晰。组合式 API 是 Vue 3 中引入的一种新的组件设计方式，它通过提供一组基础函数来组合逻辑，使得组件更加灵活、可复用和可测试。引入组合式 API 解决了 Vue 2 中混入和高阶组件等复杂模式带来的问题，使得组件逻辑更加清晰、可维护，并提高了开发效率。
defineComponent 函数是 setup 函数的语法糖之一。
defineComponent 函数支持 TypeScript 的参数类型推断（专为 TS 准备的）。若使用的是 ts + vue3，强力推荐使用它
<template> <div class="detail-page-tab-table"> <div class="top"> <div class="top-item"> <span>计划总数：{{ topMessage.totalPlanQty }}</span> </div> <div class="top-item"> <span>实发总数：{{ topMessage.totalShipQty }}</span> </div> <div class="top-item"> <span>总体积(m³)：{{ topMessage.totalVolume }}</span> </div> <div class="top-item last"> <span>总毛重(kg)：{{ topMessage.totalWeight }}</span> </div> </div> </div> </template> <script> import { defineComponent, ref, toRefs, reactive } from 'vue'; import configData from './detailInfo'; export default defineComponent({ name: 'detailTab', props: { listApi: { type: Function, }, receiptCode: { type: String, }, topActive: { type: String, }, }, setup(props) { const searchBoxIns = ref(null); const config = ref(configData); // 页面配置项 const tableApi = ref(props.listApi); const topMessage = ref({ totalPlanQty: 0, totalShipQty: 0, totalVolume: 0, totalWeight: 0, }); const obj = reactive({}) return { searchBoxIns, config, topMessage, totalData, ...toRefs(obj) }; }, }); </script> import { defineComponent, PropType} from 'vue'; interface UserInfo = { id: number, name: string, code: number } export default defineComponent({ //props需要使用PropType泛型来约束。 props: { userInfo: { type: Object as PropType<UserInfo>, // 泛型类型 required: true } }, })
8.宏任务和微任务
宏任务和微任务是异步编程中的概念。宏任务通常包括整体代码、setTimeout、setInterval 等，而微任务包括 Promise.then、MutationObserver 等。它们之间的区别在于微任务在当前任务执行结束后立即执行，而宏任务则在下一次事件循环中执行。
9.实现垂直居中的方式有三种：
使用 flex 布局的 align-items 或 justify-content 属性，使用 position 和 transform 属性，以及使用 table-cell 布局。
10.yarn.lock 或 package-lock.json 文件
用于锁定项目的依赖版本。它们记录了项目依赖的确切版本号，以确保在不同开发环境中安装的依赖版本一致，从而保证项目的稳定性和可重复性。
11防抖
常用的优化手段，用于减少频繁触发的事件或请求的执行次数。它的原理是在事件触发后等待一定的时间间隔，如果在这个时间间隔内再次触发了同一事件，则重新计时，直到间隔时间内没有触发事件，才执行相应的操作
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
