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

说一下项目亮点

  • 16
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答Vue2源码面试题,需要对Vue2的核心实现原理有较深入的理解。以下是一些可能的问题及回答: 1. Vue2如何实现响应式数据绑定? 答:Vue2通过Object.defineProperty()方法,对数据对象的属性进行劫持,当属性被读取或修改时,触发相应的getter和setter方法,在setter方法中进行依赖收集和派发更新。 2. Vue2的模板编译原理是什么? 答:Vue2的模板编译分为三个阶段:parse、optimize和generate。parse阶段将模板字符串解析为抽象语法树(AST),optimize阶段对AST进行静态节点标记、静态根节点标记和子树剪枝等优化,generate阶段将AST转为渲染函数。 3. Vue2的生命周期钩子函数有哪些?分别在哪个阶段执行? 答:Vue2的生命周期钩子函数包括:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。它们分别在Vue实例的不同生命周期阶段执行,如beforeCreate在实例初始化之后,数据观测和事件配置之前执行。 4. Vue2的异步更新策略是什么? 答:Vue2的异步更新策略基于JavaScript的事件循环机制,通过nextTick方法将DOM更新推迟到下一个事件循环时执行。在同一个事件循环中,如果多次更新同一个数据,Vue2会将这些更新合并为一个更新,以提高性能。 总之,回答Vue2源码面试题需要具备深入的理解和实践经验,需要对Vue2的核心原理、优化策略和实现细节有较为透彻的掌握。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值