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