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