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.mzph.cn/pingmian/10332.shtml

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

相关文章

虚表,虚函数习题

6. 关于虚表说法正确的是(d ) A:一个类只能有一张虚表 多重继承 B:基类中有虚函数,如果子类中没有重写基类的虚函数,此时子类与基类共用同一张虚表 即使子类重写了基类的虚函数,此时子类与…

探索生产者/消费者模式:解决并发编程中的资源竞争

序言 在并发编程中,资源竞争是一个常见的问题。为了有效地管理资源并确保线程安全,需要采用一些有效的方法。其中之一是生产者/消费者模式,它是一种经典的并发设计模式,用于解决生产者和消费者之间的协作问题。本文将深入探讨生产…

Ansible playbook

playbook playbook介绍 playbooks是ansible用于配置,部署,和管理被控节点的剧本。通过playbooks的详细描述,执行其中的tasks,可以让远端主机达到预期的状态。playbooks是由一个或多个”play”组成的列表。 当对一台机器做环境初…

conan2 基础入门(02)-安装

conan2 基础入门(02)-安装 文章目录 conan2 基础入门(02)-安装⭐前言⭐安装python安装安装包安装自行操作 ⭐验证配置环境变量命令行验证conan配置文件 END ⭐前言 Conan 2.0: C and C Open Source Package Manager 官方提供三种安装conan的方式。分别为: Recommen…

Vue3:路由

1. 路由简介 在Vue3中,路由是一个核心概念,特别是在构建单页面应用程序(SPA)时。以下是Vue3中路由的基本概念: 1. **路由(Route)**:在Vue3中,路由是指根据特定的规则将用…

行业新应用:电机驱动将成为机器人的动力核心

电机已经遍布当今社会人们生活的方方面面,不仅应用范围越来越广,更新换代的速度也日益加快。按照工作电源分类,可以将它划分为直流电机和交流电机两大类型。直流电机中,按照线圈类型分类,又可以分为有铁芯的电机、空心…

ARM单片机实现流水灯(GD32)

根据上图可知使用的引脚分别是PA8,PE6,PF6流水灯功能的实现要分别初始化这几个引脚 流水灯实现 编写流水灯代码 LED.C #include "gd32f30x.h" // Device header #include "Delay.h" // 初始化LED灯 void LED_Init(void){// 使能RCU时钟…

记录一次pods 导入 SocketRocket库的经历

折腾一上午,brew 安装成功了 cococapod 然后项目启动下载一个SocketRocket库 下载成功后总是报错: 睡了2个多小时,我在qq就交流群里求助: 终于把项目管理,在命令行里执行这句: open chat_app.xcworkspace…

Linux进程间通信 pipe 实现线程池 命名管道 实现打印日志 共享内存代码验证 消息队列 信号量

文章目录 前言管道匿名管道 pipe测试管道接口 --> 代码验证管道的4种情况管道的5种特征 线程池案例代码实现:ProcessPool.ccTask.hpp检测脚本makefile 命名管道代码演示:makefilenamedPipe.hppserver.ccclient.cc 实现日志Log.hpp 共享内存共享内存原…

串口属性中的BM延时计时器问题

如果使用程序修改则需要修改注册表对应位置如下 第一个示例&#xff08;217&#xff09; 第二个示例&#xff08;219&#xff09; 需要注意的事情是修改前必须点查看串口名称&#xff08;例如上图是com5&#xff09; 程序修改&#xff1a; 有没有办法以编程方式更改USB <…

【力扣】63.不同路径 II

原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 目录 1.题目描述 2.思路分析 3.代码实现 1.题目描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试…

uniapp管理后台编写,基于uniadmin和vue3实现uniapp小程序的管理后台

一&#xff0c;创建uniAdmin项目 打开开发者工具Hbuilder,然后点击左上角的文件&#xff0c;点新建&#xff0c;点项目。如下图。 选择uniadmin&#xff0c;编写项目名&#xff0c;然后使用vue3 记得选用阿里云服务器&#xff0c;因为最便宜 点击创建&#xff0c;等待项目创…

Codeforces Round 605 (Div. 3) A~D

本人水平不高&#xff0c;开这个专栏主要是督促自己补题&#xff0c;有些题对目前的我来说还比较难&#xff0c;还补不动&#xff0c;等以后能力上来了再补。。。 原题链接&#xff1a;Dashboard - Codeforces Round 605 (Div. 3) - Codeforces 目录 A. Three Friends B. Sn…

【Linux:lesson1】的基本指令

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux课程学习 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 &#x1f697;打开Xshell&#xff0c;登陆root…

初识java--javaSE(3)--方法,递归,数组,

文章目录 一 方法的使用1.1 什么是方法&#xff1f;main方法注意事项 1.2 方法的调用嵌套调用在方法调用时形参与实参的关系&#xff1a; 1.3 方法的重载方法重载的意义&#xff1f;总结方法重载&#xff1a;方法签名&#xff1a; 二 递归什么是递归&#xff1f;递归的精髓&…

蛋糕店做配送小程序的作用是什么

蛋糕烘焙除了生日需要&#xff0c;对喜吃之人来说往往复购率较高&#xff0c;除线下实体店经营外&#xff0c;更多的商家选择线上多种方式获客转化、持续提高生意营收&#xff0c;而除了进驻第三方平台外&#xff0c;构建品牌私域自营店铺也同样重要。 运用【雨科】平台搭建蛋…

ABAP跨client的RFC调用

1、SM59配置连接 2、创建需要调用的函数&#xff0c;ZGET_TM_LIST&#xff0c;开启远程启用模块 3、新建调用程序 DATA:L_MSG TYPE C,LSH(30) TYPE C. DATA:IT_ZSTM_LIST TYPE STANDARD TABLE OF ZSTM_LIST WITH HEADER LINE.CALL FUNCTION ZGET_TM_LIST DESTINATION ZTEST_R…

【回溯 网格 状态压缩】52. N 皇后 II

本文涉及知识点 回溯 网格 状态压缩 LeetCode52. N 皇后 II n 皇后问题 研究的是如何将 n 个皇后放置在 n n 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回 n 皇后问题 不同的解决方案的数量。 示例 1&#xff1a; 输入&#x…

python3如何安装bs4

在python官网找到beautifulsoup模块的下载页面&#xff0c;点击"downloap"将该模块的安装包下载到本地。 将该安装包解压&#xff0c;然后在打开cmd&#xff0c;并通过cmd进入到该安装包解压后的文件夹目录下。 在该文件目录下输入"python install setup.py&quo…

信息系统架构模型_3.企业数据交换总线

1.企业数据交换总线 实践中&#xff0c;还有一种较常用的架构&#xff0c;即企业数据交换总线&#xff0c;即不同的企业应用之间进行信息交换的公共通道&#xff0c;如图1所示。 图1 企业数据交换总线架构 这种架构在大型企业不同应用系统进行信息交换时使用较普遍&am…