面试题-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