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对象中添加对应的策略函数即可,不需要修改原有的代码逻辑。

说一下项目亮点

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

带有-i选项的sed命令在Linux上执行成功,但在MacOS上失败了

问题: 我已经成功地使用以下 sed 命令在Linux中搜索/替换文本: sed -i s/old_string/new_string/g /path/to/file然而,当我在Mac OS X上尝试时,我得到: command i expects \ followed by text我以为我的Mac运行的是…

如何用python的Turtle绘画?

目录 一、画一个圆和正方形 二、简单的方式来画一个美女 三、Turtle是一个用于绘制图形的标准库 一、画一个圆和正方形 import turtle# 创建一个图形窗口 window turtle.Screen() window.bgcolor("white")# 创建一个海龟画笔 pen turtle.Turtle() pen.shape(&q…

Unity使用ToggleGroup对多个Toggle进行管理时,初始化默认选项失效的问题

问题描述: 在unity脚本的OnEnable中用代码设置Toggle集合中的其中一个对象的ison时,发现并没有根据设置发生变化。但是该Toggle的OnValueChange却发生过变化。 如果使用协程等待0.01s,那么对应组件的ison的修改才能生效,但是逐帧分析的话会发…

SDXL-ControlNet模型MistoLine:引领高精度图像生成的革新高质量图像模型

在数字艺术的浩瀚星空中,MistoLine犹如一颗璀璨的新星,以其对SDXL-ControlNet技术的深度整合,展示了对多种线稿类型的非凡适应能力,并在高精度图像生成领域树立了新的标杆。 GitHub:https://github.com/TheMistoAI/Mi…

SOLIDWORKS参数化设计的作用

SOLIDWORKS参数化设计软件,主要解决加工制造型企业普遍存在的系列化产品设计周期长和出图效率低。重复工作多、人员工作强度大的问题。传统的设计模式下大规模定制型产品结构设计周期长,问题多,以及大量重复性工作让工程师疲于应对&#xff0…

sql-labs通关详解(1-10)

1.less-1 1.判断类型 由此判断是字符型漏洞由单引号闭合。 2.判断 字段个数 http://192.168.190.145/sqli-labs/Less-1/?id1 order by 3-- 3.获取数据库名 -1 union select 1,2,database()-- 4.获取表名 -1 union select 1,2,group_concat(table_name) from information_…

Spring、SpringMVC

一、Spring框架中的单例Bean是线程安全的吗? 【默认单例的情况下】Spring Bean并没有可变的状态(如Service类和DAO类),即只能查不能改,所以没有并发问题,所以某种程度上来说Spring的单例Bean是线程安全的。…

在线旅游网站,基于 SpringBoot+Vue+MySQL 开发的前后端分离的在线旅游网站设计实现

目录 一. 前言 二. 功能模块 2.1. 登录界面 2.2. 管理员功能模块 2.3. 用户功能模块 三. 部分代码实现 四. 源码下载 一. 前言 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势,旅游网站当然…

【北京迅为】《iTOP-3588开发板从零搭建ubuntu环境手册》-第2章 获取并安装Ubuntu操作系统

RK3588是一款低功耗、高性能的处理器,适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用,RK3588支持8K视频编解码,内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…

Spring框架学习-详细

文章目录 1. Spring简介1.1 面向接口编程1.2 Spring简介1.3 Spring体系结构 2 Spring IoC - 基于XML2.1 Sping框架部署(IoC)2.2 Spring IoC使用2.3 IoC和DI2.4 DI依赖注入Spring容器通过反射方法实现属性注入有三种方式1. set方法注入2. 构造器注入 2.5 …

uni-appH5Android混合开发三 || uni-app调用Android原生方法的三种方式

前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式。 uni-app跨平台框架介绍和快速入门 uni-app跨平台框架介绍和快速入门 一、H5方法调用android原生方法 H5 Android开发规范官方文档&#…

【电路笔记】-无源高通滤波器

无源高通滤波器 文章目录 无源高通滤波器1、概述2、一阶高通滤波器的频率响应3、高通滤波器示例4、二阶高通滤波器5、RC 差异化因素高通滤波器与低通滤波器电路完全相反,因为这两个组件已互换,滤波器输出信号现在从电阻器两端获取。 1、概述 由于低通滤波器只允许低于其截止…