2024前端面试题(三)

星萌君 2024-03-31 17:35:23

21. 权限判断

主要分两种方式。第一种是用户登录后,系统获取其权限信息,然后根据这些权限筛选出用户可以访问的路由,并使用addRoutes动态添加这些路由。在这个过程中,router.beforeEach()方法被用来进行路由守卫。另一种方式是在初始化时挂载全部路由,并在每个路由上标记出访问该路由所需的权限。在用户尝试进行路由跳转(在beforeRouteLeave之前)时,系统会验证用户是否拥有该权限。

22. setup的执行时机

在组件的beforeCreate生命周期钩子之前

23.是否能操作dom

获取DOM节点:

getElementById():根据元素的ID获取DOM节点。

getElementsByTagName():根据元素的标签名获取DOM节点列表。

getElementsByClassName():根据元素的类名获取DOM节点列表。

querySelector():使用CSS选择器获取第一个匹配的DOM节点。

querySelectorAll():使用CSS选择器获取所有匹配的DOM节点,返回的是一个类似数组的对象。

操作DOM:

el.getAttribute():获取元素的某个属性值。

el.setAttribute():设置元素的某个属性值。

el.removeAttribute():删除元素的某个属性。

el.dataset:包含元素的所有H5自定义属性,可以直接通过属性名访问和设置。

el.innerHTML:获取或设置元素的内部HTML内容。

el.innerText:获取或设置元素的文本内容,不会解析HTML标签。

el.value:用于获取或设置表单元素的值。

24. ref和reactive的区别

定义数据方面:

ref通常用于定义基本类型数据。

reactive主要用于定义对象或数组类型的数据。虽然ref也可以用于定义对象或数组,但内部会将其转化为reactive代理对象。

原理方面:

ref通过Object.defineProperty()的get和set方法实现数据代理。

reactive使用Proxy实现数据代理,并通过Reflect来操作源对象内部的数据。

使用方面:

使用ref定义的数据在操作时需要通过.value来访问或修改值,但在模板中不需要。

使用reactive定义的数据在操作时不需要通过.value。

25. axios和ajax的区别

axios是对ajax技术的一种封装,类似于jquery对ajax的封装。ajax技术实现了局部数据的刷新,而axios提供了对ajax的封装,使其更加方便和易用。可以说axios是ajax的一种实现,但ajax不仅限于axios,axios有的功能ajax都有,但ajax有的功能axios不一定都有。

26. vuex是什么

vuex是一个专为vue.js设计的状态管理库。它采用集中式存储来管理应用的所有组件的状态,确保这些状态以一种可预测的方式发生变化。vuex包含五大模块:

state:用于存储数据状态,可以通过this.$store.state.属性名来获取数据。

getter:基于现有数据计算新数据,类似于Vue中的计算属性。

mutations:用于改变数据的函数集合,不能有异步操作,因为不能实时监听和跟踪数据状态的变化。

actions:提交mutation的函数,可以包含异步操作,通常通过this.$store.dispatch('actionName', payload)来调用。

modules:对vuex进行模块化管理,使得状态管理更加清晰和可维护。

27. 父子组件之间的通信有哪些

使用props向子组件传递数据,使用$emit触发事件向父组件发送消息。

使用$parent和$children直接访问父组件或子组件的实例。

使用provide和inject在祖先组件和后代组件之间传递数据。

使用eventBus(事件总线)在不同组件之间传递事件。

使用Vuex进行全局状态管理,实现任意组件间的数据共享和通信。

使用v-model实现表单元素和组件的双向数据绑定。

使用$refs访问子组件的实例,从而直接操作子组件的数据和方法。

28. 哪个属性和值可以使元素同时具有块级元素和行内元素属性

可以将其display属性设置为inline-block

29. 放在html里的哪一部分js代码会在页面加载的时候被执行

body

30. ['1','2','3'].map(parseInt)返回结果为

1,NaN,NaN

0 阅读:2

星萌君

简介:躬身入局,做一个沉稳的技术人