2024前端面试题

星萌君2024-03-30 17:08:03  91

11. 闭包使用场景

比如说回调函数,还有按钮的节流,频繁点击的时候,只要在规定的事件内检测到设置的flag还是没改变,则直接返回啥也不做,或设置按钮状态为disabled也可以

12. 销毁生命周期一般做哪些业务

消除定时器,解绑事件,清除无用的变量常量等,以免造成内存溢出

13. vue中nextTick

在vue中,并不是数据一更新,DOM就立即更新,页面立即渲染,而是当一个事件循环结束后,DOM才会完成更新,页面才会成功渲染;

如通过一个for循环改变一个数据,即使这个for循环100次,DOM也只会在第100次时才更新,而不是循环100次,DOM就更新100次。

使用场景:初始化绑定或操作Dom,获取元素宽高等

14. vue自定义指令

Vue 自定义指令有全局注册和局部注册两种方式。

先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行 Vue.use调用

局部自定义指令是定义在组件内部的,只能在当前组件中使用,directives后是一个对象,对象里面key是指令名字,值是一个对象,这个对象里面有钩子函数update(更新),bind(只调用一次),inserted(插入父元素时),参数是el,binding,vnode,钩子函数里面书写逻辑

常用例子,系统权限显示按钮级:自定义一个权限数组,判断用户角色在不在这个数组内,在的话则显示,不在的话则移除该dom,使用的时候给v-自定义指令赋值判断即可

15. vue3和vue2的区别

双向绑定机制各异:Vue2采用Object.defineProperty实现数据对象的getter和setter方法,配合发布订阅模式构建双向绑定;而Vue3则依托于Proxy代理机制实现更高效的数据监听,能直接观察整个对象和数组的变化,无需闭包和遍历等复杂操作。

生命周期的不同:Vue2存在诸如创建前后、挂载前后、更新前后及销毁前后等多个生命周期钩子;Vue3舍弃了创建前后的钩子,代之以setup函数,并将生命周期钩子前缀添加on,销毁钩子变为onBeforeUnmounted和onUnmounted。

Vue3支持多根节点,而Vue2则不允许。

Vue2采用选项式API组织代码,Vue3则引入组合式API,允许开发者更加直观地整合数据和逻辑,如使用ref和reactive替代data和methods属性。

父子间数据传递方式:Vue2借助props和$emit进行通信,Vue3则引入defineProps和defineEmits。

16. hooks的理解

Hooks是一种编程范式,它代表一种将独立功能模块化的函数式编程实践。此类函数通常将分散在项目各处的通用功能提取至独立的JS文件中,便于复用。通过hook,开发者能够更好地组织和管理那些可以跨组件共享的功能逻辑。

17. 如果用户跳过登陆页面,直接在地址栏输入地址跳转,路由是如何进行拦截的

多数JavaScript网络请求库内置了拦截器机制,可在请求发送前和响应接收后进行预处理。用户正常登录后,前端将session ID(或其他形式的身份验证令牌)储存在cookie中。随后发起的每个AJAX请求都会携带此ID或令牌。服务器端会对每个需要验证身份的请求检查该标识符的有效性,如果不通过,则返回HTTP 401错误。因此,客户端应在响应拦截器中检查401状态码,并在遇到这种情况时重定向回登录页面。

18. canvas有哪些方法和属性

getContext方法获取绘图上下文,提供了一系列用于Canvas绘图的方法和属性。

beginPath方法用于开始一个新的路径或者重置当前路径。

closePath方法闭合当前路径,使其从当前点到起点形成封闭图形。

lineTo方法添加一个线段到路径,从当前点到指定点。

rect方法用于创建一个矩形路径。

arc方法用于创建圆形或部分圆弧路径。

moveTo方法将当前路径移动到指定点而不画线。

stroke方法用于描边已定义的路径。

19. vue中什么是单向数据流

单向数据流意味着数据流动方向始终是从父组件流向子组件,子组件不能直接修改父组件传递过来的数据。这样做一是为了避免多个子组件之间因数据共享带来的不确定性问题,二是保证父组件对所有数据变化具有清晰的控制权。子组件若需修改数据,应通过事件通知父组件,由父组件修改后再向下传递。

20.组件的作用域

在Vue中定义组件时,作用域限定在组件自身范围之内。而在引用组件时,作用域则是引用该组件的父级作用域。这意味着组件内的数据、方法等仅在组件内部可见和可调用,外部环境如父组件需通过props传递数据,子组件通过事件机制反馈信息。

转载此文是出于传递更多信息目的。若来源标注错误或侵犯了您的合法权益,请与本站联系,我们将及时更正、删除、谢谢。
https://www.414w.com/read/71688.html
0
最新回复(0)