Vue面试经验2

Vue

你说你在vue项目中实现了自定义指令，如何实现

全局指令在main.js入口文件中实现

使用方法：v-指令名称
每个钩子函数都有两个参数（ele,obj）
ele:绑定指令的元素
obj:指令的一些信息（比如绑定指令的值，binding.value）

Vue.directive('指令名称',{
//指令周期的钩子函数，每个钩子函数都有两个参数
bind(ele,obj){}, //不重要，只执行一次，DOM渲染之前执行里面可以进行样式操作
inserted(ele,obj){},  //重要 ，只执行一次，DOM渲染之后执行，里面可以进行行为操作
update(ele,obj){}, //重要，数据更新之后执行
componentUpdated(ele,obj){}, //不重要，父子组件都更新后执行
unbind(ele,obj){},  //不重要，指令解绑的时候执行
})
局部指令在export default{}中实现，只能在当前指令中使用
export default{
directives:{指令名称:{
//指令周期的钩子函数，每个钩子函数都有两个参数
bind(ele,obj){}, //不重要，只执行一次，DOM渲染之前执行里面可以进行样式操作
inserted(ele,obj){},  //重要 ，只执行一次，DOM渲染之后执行，里面可以进行行为操作
update(ele,obj){}, //重要，数据更新之后执行
componentUpdated(ele,obj){}, //不重要，父子组件都更新后执行
unbind(ele,obj){},  //不重要，指令解绑的时候执行
},  }
}

在这里插入图片描述
在这里插入图片描述

路由传参

两种方式

/xxx/xxx?id=3&name=xxx-----查询参数传参
/xxx/xxx/3/xxx --------动态路由传参

网络

三次握手和四次挥手

三次握手

指建立一个TCP连接时，需要客户端和服务器总共发送三个包，主要是确认双方的接受和发放能力是否正常。
初始化 客户端处于Closed状态，服务器处于Listen状态
**第一次握手：**客户端给服务器发送一个TCP报文【向服务器请求连接】，客户端处于SYN-SEND
**第二次握手：**服务器收到SYN报文后，回复浏览器【同意连接】，服务端进入SYN-REVD阶段
**第三次握手：**浏览器收到报文后回复服务器【收到回复】，服务器和浏览器同时进入ESTABLISHED状态，此时双方连接已建立，开始传送数据
在这里插入图片描述
**那为什么是三次握手呢？两次不行吗？**为了确认双方的接收能力和发送能力都正常。服务端在发送完SYN后，客户端需要回复一个ACK告诉服务的确认有效

四次挥手

刚开始双方都处于ESTABLISHED状态
**第一次挥手：**向服务器发送报文，请求关闭连接，浏览器进入FIN-WAIT-1半关闭状态
**第二次挥手：**服务器收到报文后，知道浏览器要断开连接，开始处理内部操作，服务器进入CLOSE-WAIT阶段，浏览器进入FIN-WAIT-2阶段，等待服务器处理
**第三次挥手：**服务器处理完毕，回复浏览器，服务器进入LAST-ACK状态，等待浏览器确认收到
**第四次挥手：**浏览器进入TIME-WAIT状态，此时TCP未释放，等待2MSL（毫秒），等到服务器收到自己的报文，然后进入CLOSE阶段

在这里插入图片描述
**为什么是四次：**客户端发送FIN报文后，表示客户端当前没有数据需要处理，而不代表服务端没有数据需要处理。此时需要服务端回复ACK确认收到报文后，开始处理内部数据，当内部数据处理完成后，再回复FIN可以关闭连接

HTTP状态码

1️⃣1xx:请求正在处理
2️⃣2xx:正常状态码
①200：请求处理成功
②201：请求成功，并且服务器创建了新资源
③202：服务器已经接受请求，但尚未处理
3️⃣3xx:重定向状态
①301：请求重定向
②302：临时重定向
③303：临时重定向，使用get请求新的url
④304：浏览器缓存相关
4️⃣4xx:错误状态码
①400：服务器无法理解请求格式，需要修改请求内容后再次发起请求
②401：请求未授权
③403：禁止访问
④404：服务器上无法找到请求资源
5️⃣5xx:服务器错误
①500：服务端错误
②503：服务器暂时无法处理请求

对WebSocket的理解

WebSocket是一种在单个TCP连接上实现全双工通信的网络协议，与传统的HTTP协议不同，HTTP是基于请求-响应模式的，即客户端发送请求，服务器返回响应，然后直接关闭。而WebSocket允许客户端和服务器之间保持持久性的连接，双方可以随时互相发送数据，而不需要每次通信都建立新的连接
服务器可以向客户端主动推送消息，客户端也可以主动向服务器推送消息

Git

Git的分支有哪些及其作用

在Git中，有多种类型的分支，每种分支都有不同的作用。以下是一些常见的Git分支以及它们的作用：

git上的分支说明和命名规范

1️⃣master(主分支)：正式环境的版本分支，永远是可用的、稳定的、可直接发布的版本，不能直接在该分支上开发
2️⃣develop(测试分支)：测试环境的版本分支。代码永远是最新，该分支只做合并操作，不能将此分支合并到其他任意一个分支中，否则会污染其他分支的代码，并且不能直接在该分支上开发
3️⃣develop-版本号(需求分支)：对应产品提出的需求，基于master分支创建
4️⃣feature-xxx-yyy(特性分支)：具体开发人员的分支，基于develop-版本号(需求分支)创建分支，xxx版本号，yyy为自己名字的首字母拼写或全拼。开发完成后合并到develop-版本号分支。上线后对应的feature分支可删掉
5️⃣hotfix-xxx(bug修复分支)：项目上线后可能会遇到一些环境问题需要紧急修复，在master分支上创建，修复完成后合并到develop和master分支

git开发流程

第一种情况：产品提出新需求
1.先基于master新建develop-版本号分支
2.参数该需求的开发人员，基于develop-版本号分支，建立各自的feature分支
第二种情况：测试
1.先把各自的feature分支合并到develop-版本号分支
2.develop-版本号分支合并到develop分支
第三种情况：上线
1.把对应的develop-版本号分支合并到master分支

git注意事项

1.每个开发人员本地至少会有4个分支：master、develop、develop-版本号、feature
2.开发人员只能拉取develop-版本号和其他人员feature
3.在checkout本地新分支后要先pull，保证版本的最新
4.a分支合并到b分支的时候，b分支最好先pull下
5.feature-xxx-yyy一个分支尽量开发一个功能模块，不要多个功能模块在一个分支上开发

项目

如何进行代码审查CodeReview

针对点出的代码问题进行改进。
1.像变量名函数名等命名进行语义化改进
2.对行数太多的页面，抽离出组件和方法，提高代码的可读性
3.针对像一些复杂的if/else代码块，采用JS设计模式-策略模式的思想,以对象形式建立key-value映射关系进行抽离重写，提高代码的可读性

当面对复杂的if/else代码块时，可以使用策略模式的思想，通过建立对象形式的key-value映射关系来抽离和重写代码，从而提高代码的可读性和可维护性。以下是一个简单的示例：
假设有一个计算器程序，根据用户选择的运算符来执行相应的计算操作。传统的if/else代码块可能如下所示：

function calculate(operator, num1, num2) {
    let result;
    if (operator === '+') {
        result = num1 + num2;
    } else if (operator === '-') {
        result = num1 - num2;
    } else if (operator === '*') {
        result = num1 * num2;
    } else if (operator === '/') {
        result = num1 / num2;
    }
    return result;
}

这样的代码结构可能会随着条件的增加而变得复杂和难以维护。通过策略模式，可以将不同的计算操作封装成具体的策略类，并建立一个映射关系对象来选择相应的策略。重写如下：

const strategies = {
    '+': (num1, num2) => num1 + num2,
    '-': (num1, num2) => num1 - num2,
    '*': (num1, num2) => num1 * num2,
    '/': (num1, num2) => num1 / num2
};

function calculate(operator, num1, num2) {
    if (strategies[operator]) {
        return strategies[operator](num1, num2);
    } else {
        throw new Error('Invalid operator');
    }
}

在这个重写后的代码中，我们将不同的计算操作封装成具体的策略函数，并存储在strategies对象中，通过传入不同的运算符来选择相应的策略函数进行计算。这样可以避免繁杂的if/else代码块，提高了代码的可读性和可维护性。同时，如果需要新增其他运算符的计算操作，只需要在strategies对象中添加对应的策略函数即可，不需要修改原有的代码逻辑。

说一下项目亮点

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/612303.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

OpenCV中的模块：点云配准

OpenCV中的模块：点云配准

点云配准是点云相关的经典应用之一。配准的目的是估计两个点云之间位姿关系从而完成两者对应点之间的对齐/对应，因而在英文中又叫“align”、“correspondence”。笔者曾经是基于OpenCV进行三维重建的，并且从事过基于深度学习的6DoF位置估计等工作。在这些工作中，除了重建点…
阅读更多...
docker compose kafka集群部署

docker compose kafka集群部署

kafka集群部署 目录 部署zookeeper准备工作2、部署kafka准备工作3、编辑docker-compose.yml文件4、启动服务5、测试kafka6、web监控管理 部署zookeeper准备工作 mkdir data/zookeeper-{1,2,3}/{data,datalog,logs,conf} -p cat >data/zookeeper-1/conf/zoo.cfg<<EOF…
阅读更多...
基于STM32F401RET6智能锁项目（使用库函数点灯、按键）

基于STM32F401RET6智能锁项目（使用库函数点灯、按键）

点灯硬件原理图 1、首先&#xff0c;我们查看一下原理图&#xff0c;找到相对应的GPIO口 LED_R低电平导通&#xff0c;LED4亮&#xff0c;所以LED_R的GPIO口需要配置一个低电平才能亮&#xff1b; LED_G低电平导通&#xff0c;LED3亮&#xff0c;所以LED_R的GPIO口需要配置一…
阅读更多...
[C++核心编程-06]----C++类和对象之对象模型和this指针

[C++核心编程-06]----C++类和对象之对象模型和this指针

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…
阅读更多...
VTK 数据类型：规则网格

VTK 数据类型：规则网格

VTK 数据类型&#xff1a;规则网格 VTK 数据类型&#xff1a;规则网格分类三种规则网格需要的设置实例 VTK 数据类型&#xff1a;规则网格 分类 VTK 有 3 种规则网格&#xff1a; vtkImageData&#xff1a;几何结构和拓扑结构都是规则的。vtkRectilinearGrid&#xff1a;几何…
阅读更多...
使用2G内存求20亿个数字中出现次数最多的N个

使用2G内存求20亿个数字中出现次数最多的N个

又是一个TOP -N的题目 我看了一下CSDN上大多数人的回答和GPT说的差不多&#xff0c;都是说使用哈希之类的&#xff1b; 我今天说一下我的解法&#xff0c;首先说一下不太快的基础解法 20亿数字使用uint32需要80GB&#xff0c; &#xff08;1&#xff09;分为40块读取&#…
阅读更多...
云粒智慧实时数仓的架构演进分享：OceanBase + Flink CDC

云粒智慧实时数仓的架构演进分享：OceanBase + Flink CDC

4月20日&#xff0c;在2024 OceanBase开发者大会上&#xff0c;云粒智慧的高级技术专家付大伟&#xff0c;分享了云粒智慧实时数仓的构建历程。他讲述了如何在传统数仓技术框架下的相关努力后&#xff0c;选择了OceanBase Flink CDC架构的实时数仓演进历程。 业务背景及挑战 …
阅读更多...
【C#进阶】简单数据结构类

【C#进阶】简单数据结构类

简单数据结构类 文章目录 1、Arraylist1、ArrayList的本质2、声明3、增删查改4、装箱拆箱思考 背包售卖 2、Stack1、Stack的本质2、声明3、增取查改4、遍历思考 计算一个数的二进制 3、Queue1、Queue的本质2、声明3、增取查改4、遍历思考 每隔一段时间打印一条消息 4、Hashtab…
阅读更多...
赣红孵联合卫东街道未保站开展未成年人保护法散落在每个角落活动

赣红孵联合卫东街道未保站开展未成年人保护法散落在每个角落活动

为进一步提高家长的法治意识&#xff0c;依法保障未成年人的合法权益&#xff0c;全力构建安全和谐文明家庭&#xff0c;5月8日&#xff0c;赣红孵社会组织培育中心联合卫东街道未成年人保护站在在南师附小红谷滩校区实验小学开展“未成年人保护法散落在每个角落”未成年人普法…
阅读更多...
无列名注入

无列名注入

在进行sql注入时&#xff0c;一般都是使用 information_schema 库来获取表名与列名&#xff0c;因此有一种场景是传入参数时会将 information_schema 过滤 在这种情况下&#xff0c;由于 information_schema 无法使用&#xff0c;我们无法获取表名与列名。 表名获取方式 Inn…
阅读更多...
如何通过汽车制造供应商协同平台，提高供应链的效率与稳定性？

如何通过汽车制造供应商协同平台，提高供应链的效率与稳定性？

汽车制造供应商协同是指在汽车制造过程中&#xff0c;整车制造商与其零部件供应商之间建立的一种紧密合作的关系。这种协同关系旨在优化整个供应链的效率&#xff0c;降低成本&#xff0c;提高产品质量&#xff0c;加快创新速度&#xff0c;并最终提升整个汽车产业的竞争力。以…
阅读更多...
龙芯LA架构相关的存储管理

龙芯LA架构相关的存储管理

&#xff08;LoongArch-P92&#xff09; 目录 1.1 物理地址空间 1.2 虚拟地址空间 1.3 LA64架构下的虚拟地址缩减模式 1.4 存储访问类型 1.5 页表映射存储管理 1.5.1 TLB组织结构 1.5.2 基于TLB的虚实地址转换过程 1.5.3 TLB的软件管理 &#xff08;1&#xff09;…
阅读更多...
计算概论学习笔记（1）

计算概论学习笔记（1）

感谢北大李戈老师讲解的计算概论。 【道阻且长&#xff0c;行则将至】 很多年没有intensive coding&#xff0c;现在这个系列是coding retake&#xff0c;一点点回忆之前的知识&#xff0c;希望能重回到一线。主要内容包括C,C,Pytorch学术前沿项目学习和实践&#xff0c;预计…
阅读更多...
线路和绕组中的波过程（一）

线路和绕组中的波过程（一）

本篇为本科课程《高电压工程基础》的笔记。 本篇为这一单元的第一篇笔记。下一篇传送门。 当电路中的设备&#xff08;元件&#xff09;最大实际尺寸l大于人们所感兴趣的谐波波长 λ \lambda λ时&#xff0c;可以作为集中参数处理&#xff0c;否则就要当做分布参数处理。即&…
阅读更多...
C语言 [力扣]详解环形链表和环形链表II

C语言 [力扣]详解环形链表和环形链表II

各位友友们&#xff0c;好久不见呀&#xff01;又到了我们相遇的时候&#xff0c;每次相遇都是一种缘分。但我更加希望我的文章可以帮助到大家。下面就来具体看看今天所要讲的题目。 文章目录 1.环形链表2.环形链表II 1.环形链表 题目描述:https://leetcode.cn/problems/link…
阅读更多...
Babel基础知识及实现埋点插件

Babel基础知识及实现埋点插件

目录 前言 AST 遍历 Visitors Paths&#xff08;路径&#xff09; Paths in Visitors&#xff08;存在于访问者中的路径&#xff09; State&#xff08;状态&#xff09; Scopes&#xff08;作用域&#xff09; Bindings&#xff08;绑定&#xff09; API babylo…
阅读更多...
「TypeScript」TypeScript入门练手题

「TypeScript」TypeScript入门练手题

前言 TypeScript 越来越火&#xff0c;现在很多前端团队都使用它&#xff0c;因此咱们前端码农要想胜任以后的前端工作&#xff0c;就要更加熟悉它。 入门练手题 interface A {x: number;y: number; }type T Partial<A>;const a: T { x: 0, y: 0 }; const b: T { …
阅读更多...
LLM 可以从简单数据中学习吗？

LLM 可以从简单数据中学习吗？

在 10 月份的一次周会结束后&#xff0c;我提到 SFT 训练后的 Loss 曲线呈现阶梯状&#xff0c;至于为什么&#xff0c;并没有人有合理的解释&#xff0c;加上当时的重心是提升次日留存率&#xff0c;Loss 曲线呈现阶梯状与次日留存率的关系还太远&#xff0c;即使有问题&#…
阅读更多...
使用单片机的IO引脚直接驱动段码屏

使用单片机的IO引脚直接驱动段码屏

使用单片机的IO引脚直接驱动段码屏,目的是为了降低成本。这种古老的应用,在低功耗产品中比较多见。 如:水表&#xff0c;燃气表等需要电池供电的产品。 下面纯属个人理解&#xff0c;未经测试。 1/3Duty表示LCD共有3个COM引脚,分别占显示周期的1/3 1/2BIAS表示电压0和VCC 1、…
阅读更多...
2024年记一次Mingw64-13.2.0编译Qt6.6.3，包含文档编译。

2024年记一次Mingw64-13.2.0编译Qt6.6.3，包含文档编译。

My C Development. 前言&#xff1a;不包含qtwebengine。 一、准备文件 &#xff08;1&#xff09;mingw64-13.2.0 下载链接&#xff1a;&#xff0c;ucrt64_13.2_ucrt_posix_rev6_msys2.7z【蓝奏云】。 &#xff08;2&#xff09;qt6.6.3源码 下载链接&#xff1a;Downlo…
阅读更多...
最新文章

Copyright @ 2022~2023