面试题-8

1.vue路由是怎么传参的？

params传参

this.$router.push({name:'index'})

this.$route.params.id

路由属性传参

this.$router.push({name:'/index/${item.id}'})

配置路由{path:'/index:id'}

query传参(可以解决页面刷新参数丢失的问题)

this.$router.push({

name:'index',

query:{id:item.id}

})

2.vue的hash模式和history模式有什么区别？

1.hash的路由地址上有#号，history模式没有

2.在做回车刷新的时候，hash模式会加载对应页面,history会报错404

3.hash模式支持低版本浏览器,history不支持,因为是H5新增的API

4.hash不会重新加载页面,单页面应用必备

5.history有历史记录,H5新增了pushState和replaceState()去修改历史记录,并不会立刻发送请求

6.history需要后台配置

3.路由拦截是怎么实现的？

路由拦截 axios 拦截

需要在路由配置中添加一个字段,它是用于判断路由是否需要拦截

{
 
name:'index'
 
path:'/index',
 
component:Index,
 
meta:{
 
requirtAuth:true
 
}
 
}

router.beforeEach((to,form,next)=>{
 
if(to.meta.requirtAuth){
 
if(store.state.token){
 
next()
 
}else{
 
}
 
}
 
})

 

4.说一下vue的动态路由

要在路由配置里设置meta属性,扩展权限相关的字段,在路由导航守卫里通过判断这个权限标识,实现路由的动态增加和跳转。

根据用户登录的账号,返回用户角色

前端再根据角色,跟路由表的meta.role进行匹配

把匹配搭配的路由形成可访问的路由

5.如何解决刷新后二次加载路由？

1.window.location.reload()    缺点会出现闪屏的问题
 
2.matcher
 
 const  router=createRouter()
 
export  function rasetRouter(){
 
const  newRouter=creatRouter()
 
router.matcher=newRouter.matcher
 
}

6.vuex刷新数据会丢失吗？怎么解决？

vuex肯定会重新获取数据,页面也会丢失数据

1.把数据直接保存在浏览器缓存里(cookie,localstorage,sessionstorage)

7.computed和watch的区别？

1.computed是计算属性，watch是监听,监听的是data中数据的变化

2.computed是支持缓存的,依赖的属性值发生变化，计算属性才会重新计算，否则用缓存，watch不支持

3.computed不支持异步,watch是可以异步操作

4.computed是第一次加载就监听,watch是不监听

5.computed函数中必须有return  watch不用

8.vuex在什么场景会去使用？属性有哪些？

state   存储变量

getters   state的计算属性

mutations  提交更新数据的方法

actions      和mutations差不多,他是提交mutations来修改数据,可以包括异步操作

modules  模块化vuex

使用场景:

用户的个人信息,购物车模块，订单模块

9.vue的双向数据绑定的原理是什么？

通过数据劫持和发布订阅者模式来实现,同时利用Object.defineProperty()劫持各个属性的setter和getter在数据发生改变的时候发布消息给订阅者,触发对应的监听回调渲染视图,也就是说数据和视图是同步的,数据发生改变,视图跟着发生改变,视图改变,数据也会改变

第一步:

需要observer的数据对象进行递归遍历,包括属性对象的属性,都加上setter和getter

第二步:

compile模板解析指令,把模板中的变量替换数据,然后初始化渲染视图，同时把每个指令对应的节点绑定上更新函数,添加订阅者,如果数据变化,收到通知,更新视图

第三步:

Watcher订阅者是Observer和Compile之间的通信桥梁

10.了解diff算法和虚拟DOM吗？

虚拟DOM,描述元素和元素之间的关系,创建一个JS对象

如果组件内有响应的数据,数据发生改变的时候,render函数会产生一个新的虚拟DOM,这个新的虚拟DOM和旧的虚拟DOM进行对比，找到需要修改的虚拟DOM内容，然后去对应的真实DOM中去修改，diff算法就是虚拟Dom的比对时用的,返回一个patch对象,这个对象的作用就是存储两个节点不同的地方,最后patch里记录的信息进行更新真是DOM

11.vue和jquery的区别是什么？

1.原理不同

vue就是数据绑定:jq是先获取dom再处理

2.着重点不同

vue是数据驱动,jq着重于页面

3.操作不同

4.未来发展不同

12.vuex的响应原理

vuex是vue的状态管理工具

vue中可以直接触发methos中的方法,vuex是不可以的。未来处理异步,当事件触发的时候,会通过dispatch来访问actions中的方法，actions中的commit会触发mutations中的方法从而修改state里的值,通过getter把数据更新到视图

Vue.use(vuex),调用install方法, 通过applyMixin(vue)在任意组件内执行this.$store就可以访问到store对象

vuex的state是响应式的,借助的就是vue的data,把state存到vue实例组件的data中        

13.vue中遍历全局的方法有哪些？