Vue 经典面试题(36-42)

86 阅读2分钟

这是我参与11月更文挑战的第17天,活动详情查看:2021最后一次更文挑战

36. pc端页面刷新时实现vuex缓存?

image.png

37. vue的路由实现Hash模式和History模式?

hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取。特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面

history式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更

38.实现Vue SSR?

app.js作为客户端与服务端的公用入口,导出Vue根实例,供客户端entry与服务端entry使用。客户端entry主要作用挂载到DOM上,服务端entry除了创建和返回实例,还进行路由匹配与数据预获取。

webpack为客服端打包一个Client Bundle,为服务端打包一个Server Bundle。

服务器接收请求时,会根据url,加载相应组件,获取和解析异步数据,创建一个读取Server Bundle的BundleRenderer,然后生成html发送给客户端。

客户端混合,客户端收到从服务端传来的DOM与自己的生成的DOM进行对比,把不相同的DOM激活,使其可以能够响应后续变化,这个过程称为客户端激活。为确保混合成功,客户端与服务器端需要共享同一套数据。在服务端,可以在渲染之前获取数据,填充到store里,这样,在客户端挂载到DOM之前,可以直接从store里取数据。首屏的动态数据通过window.__INITIAL_STATE__发送到客户端

Vue SSR的实现,主要就是把Vue的组件输出成一个完整HTML,vue-server-renderer就是干这事的

Vue SSR需要做的事多点(输出完整HTML),除了complier -> vnode,还需如数据获取填充至HTML、客户端混合(hydration)、缓存等等。相比于其他模板引擎(ejs,jade等),最终要实现的目的是一样的,性能上可能要差点

39. vue-router如何响应路由参数的变化?

image.png

image.png 导航守卫

image.png

40. vue-router有哪几种导航钩子?

全局钩子

单个路由独享的

由组件级的

41.完整的vue-router导航解析流程?

image.png

42. vue-router实现路由懒加载(动态加载路由)?

image.png

image.png

image.png