Vue面试经验2

news2024/10/6 10:31:05

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.coloradmin.cn/o/1662138.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python Pendulum：用代码提升您的时间管理技能

Python Pendulum：用代码提升您的时间管理技能

更多Python学习内容：ipengtao.com Python中的Pendulum库是一个强大的日期和时间处理工具，提供了丰富的功能和灵活的接口，用于处理日期、时间、时区等相关操作。本文将全面介绍Pendulum库的主要功能、使用方法和实际应用场景，并给出…
阅读更多...
基于ESP32和ESP8266的物联网开发过程（二）

基于ESP32和ESP8266的物联网开发过程（二）

在做这个项目前，也做了一些调研。项目的初衷是想要用于智能家居。我比较了小米IoT、阿里云、ESPHOME、巴沙云、点灯科技和ONENET等几个平台。最终选择了Onenet，部分原因是之前用过它的多协议版本，但现在这个版本已经下线了。 小米IoT的公测名…
阅读更多...
使用FFmpeg处理RTSP视频流并搭建RTMP服务器实现图片转直播全流程

使用FFmpeg处理RTSP视频流并搭建RTMP服务器实现图片转直播全流程

目录 一、FFmpeg安装与配置教程二、搭建并配置Nginx RTMP服务器三、从RTSP视频流提取帧并保存为图片四、将图片序列转换为视频五、将视频推送为直播流六、将图片序列推送为直播流 在实时音视频领域，我们经常需要处理从各种源（如摄像头）获取的…
阅读更多...
Java练手项目 个人学习等选题参考

Java练手项目 个人学习等选题参考

难度系数说明： 难度系数用来说明项目本身进行分析设计的难度 难度系数大于1的项目是非常值得反复学习的，从项目中成长 前言 大家好，我是二哈喇子，此博文整理了各种项目需求 要从本篇文章下的项目中学习的思路： 用的…
阅读更多...
【架构】MVC架构模式 三层架构

【架构】MVC架构模式 三层架构

1 不使用MVC架构模式完成银行账户转账 <% page contentType"text/html;charsetUTF-8" language"java" %> <html><head><base href"${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.…
阅读更多...
[MRCTF2020]Ez_bypass1 and [网鼎杯 2020 青龙组]AreUSerialz1（）php语言基础学习，以及序列化概念的基本了解

[MRCTF2020]Ez_bypass1 and [网鼎杯 2020 青龙组]AreUSerialz1（）php语言基础学习，以及序列化概念的基本了解

1.[MRCTF2020]Ez_bypass1 &#xff08;1&#xff09;打开环境后它是一串很长并且看起来非常混乱的代码&#xff0c;看不懂那咱就先不管&#xff0c;直接查看源码 &#xff08;2&#xff09;看了之后可以发现它涉及到很多东西 首先就是要进行一个仔细的代码审计&#xff0c;分…
阅读更多...
网络基础-ICMP协议

网络基础-ICMP协议

ICMP&#xff08;Internet Control Message Protocol&#xff0c; Internet控制消息协议&#xff09; ICMP协议是IP协议的辅助协议&#xff0c;用于在IP网络上发送控制消息&#xff0c;它通常被用于诊断网络故障、执行网络管理任务以及提供一些错误报告&#xff1b;对于收集各…
阅读更多...
XWiki 服务没有正确部署在tomcat中，如何尝试手动重新部署？

XWiki 服务没有正确部署在tomcat中，如何尝试手动重新部署？

1. 停止 Tomcat 服务 首先&#xff0c;您需要停止正在运行的 Tomcat 服务器&#xff0c;以确保在操作文件时不会发生冲突或数据损坏&#xff1a; sudo systemctl stop tomcat2. 清空 webapps 下的 xwiki 目录和 work 目录中相关的缓存 删除 webapps 下的 xwiki 目录和 work …
阅读更多...
回炉重造java----单列集合(List,Set)

回炉重造java----单列集合(List,Set)

体系结构: 集合主要分为两种&#xff0c;单列集合collection和双列集合Map&#xff0c;区别在于单列集合一次插入一条数据&#xff0c;而双列的一次插入类似于key-value的形式 单列集合collection 注:红色的表示是接口&#xff0c;蓝色的是实现类 ①操作功能: 增加: add()&am…
阅读更多...
六级仔细阅读

六级仔细阅读

画两到三个词&#xff0c;精准定位 要原文和同义都满足才选 先看题目&#xff0c;在看原文&#xff0c;不要先看选项 做不出答案就继续往下读&#xff0c;读出来了就不用继续读了 分清楚是问为什么还是是什么&#xff0c;是什么看前面&#xff0c;为什么看后面 不知道就优先…
阅读更多...
三、配置带HybridCLR的ARCore开发环境

三、配置带HybridCLR的ARCore开发环境

预告 本专栏将介绍如何使用这个支持热更的AR开发插件&#xff0c;快速地开发AR应用。 专栏&#xff1a; Unity开发AR系列 插件简介 通过热更技术实现动态地加载AR场景&#xff0c;简化了AR开发流程&#xff0c;让用户可更多地关注Unity场景内容的制作。 “EnvInstaller…”支…
阅读更多...
Java JVM 浅析

Java JVM 浅析

为什么要有JVMJVM是什么&#xff1f;JVM的工作流程和组成部分JVM规范和JVM实现JVM原理详解 带着以上问题&#xff0c;我将尝试对JVM作出一些简单的介绍。 一、JVM 简介 在90年代初&#xff0c;软件开发面临一个大问题&#xff0c;即不同的操作系统和硬件架构要求开发不同的版本…
阅读更多...
【Java代码审计】代码审计的方法及常用工具

【Java代码审计】代码审计的方法及常用工具

【Java代码审计】代码审计的方法及常用工具 代码审计的常用思路代码审计辅助工具代码编辑器测试工具反编译工具Java 代码静态扫描工具 代码审计的常用思路 1、接口排查&#xff08;“正向追踪”&#xff09;&#xff1a;先找出从外部接口接收的参数&#xff0c;并跟踪其传递过…
阅读更多...
3DGS+3D Tiles融合已成 ，更大的场景，更细腻的效果～

3DGS+3D Tiles融合已成 ，更大的场景，更细腻的效果～

最近国外同行Kieran Farr发布了一个他制作的3D GussianSplatting(高斯泼溅)Google Map 3D Tiles的融合叠加的demo案例&#xff08;如下所示&#xff09;。 准确来说这是一个数据融合的实景场景&#xff0c;该实景场景使用了倾斜三维和3D GussianSplatting两种实景表达技术&…
阅读更多...
深入理解Java TreeSet：实现与使用案例分析

深入理解Java TreeSet：实现与使用案例分析

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…
阅读更多...
【WPF学习笔记（一）】WPF应用程序的组成及Window类介绍

【WPF学习笔记（一）】WPF应用程序的组成及Window类介绍

WPF应用程序的组成及Window类介绍 WPF应用程序的组成及Window类介绍前言正文1、WPF介绍1.1 什么是WPF1.2 WPF的特点1.3 WPF的控件分类 2、XAML介绍2.1 XAML的定义2.2 XAML的特点2.3 XAML的命名空间 3、WPF应用程序组成3.1 App.config3.2 App.xaml3.3 App.xaml.cs3.4 MainWindow…
阅读更多...
react18【实战】tab切换，纯前端列表排序（含 lodash 和 classnames 的安装和使用）

react18【实战】tab切换，纯前端列表排序（含 lodash 和 classnames 的安装和使用）

技术要点 动态样式 className{tabItem ${currentType item.value && "active"}}安装 lodash npm i --save lodash使用 lodash 对对象数组排序&#xff08;不会改变源数组&#xff09; _.orderBy(dataList, "readNum", "desc")src\De…
阅读更多...
十二种网络威胁防护方案

十二种网络威胁防护方案

一、SQL注入 SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严&#xff0c;攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句&#xff0c;在管理员不知情的情况下实现非法操作&#xff0c;以此来实现欺骗数据库服务器执行非授权的任…
阅读更多...
Python之数据分析基础

Python之数据分析基础

导言&#xff1a; “21世纪的竞争是数据的竞争&#xff0c;谁掌握数据&#xff0c;谁就掌握未来”。如何将大量看似杂乱无章的数据进行聚合&#xff0c;并发现潜在的规律也变得越来越重要。本文将先说明数据分析的步骤&#xff0c;再通过python完成实例数据的处理、分析最终展…
阅读更多...
19.接口自动化-Jekins学习

19.接口自动化-Jekins学习

1.CI-持续集成 频繁的&#xff08;一天多次&#xff09;将代码集成到主干 目的&#xff1a;让产品快速迭代&#xff0c;保持高质量 好处&#xff1a; 快速发现错误&#xff0c;每次更新都集成到主干&#xff0c;可以快速发现错误&#xff0c;定位错误也容易防止分支大幅偏离主…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023