常见面试题（6）

1.Vue组件间的数据传递

Vue2和vue3都能使用props传值，需要在传值的地方写上：，一般在父组件中写，传值的时候要先定义一个名称，方便子组件接受，vue3还提供了provide和inject,这都在setup里面写，同样也得先传入一个自己拟定的变量名，方便子组件接受，还有消息订阅与发布，

还可以把数据都存入vuex中，实现组件之间的数据共享

2. Vue的路由实现：hash模式 和 history模式原理

hash模式在url地址栏上会有一个#,history在地址栏上没有#

如果要传递参数的话，刷新页面的时候history的地址栏参数不会丢失，hash的信息会丢失，

hash只适用于ie10以上的浏览器，其他浏览器不适应，history会保留所浏览过的信息，hash不会保留浏览过的信息

3.vue路由的钩子函数

vue路由钩子大致可以分为三类:

1. 全局钩子：beforeEach和aftrEach,

   1. beforeEach函数有三个参数：

      1. to:router即将进入的路由对象

      2. from:当前导航即将离开的路由

      3. next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航

   2. afterEach函数不用传next()函数

      1. 这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作

2. 单个路由里面的钩子

   1. beforeEnter-beforeLeave-主要用于写某个指定路由跳转时需要执行的逻辑

3. 组件路由:

   1. 主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.

4. v-if 和 v-show 区别

• v-if是通过DOM结点的添加或者删除来控制结点显示或者隐藏，
• v-show是通过css样式来控制节点的显示或者隐藏，
• v-if的切换频率较低的场景，不展示的DOM元素直接被删除，
• v-show的切换频率较高的场景，不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。
• 使用v-if时，元素可能无法获取到，但v-show一定能获取到

5.$route和$router的区别

l、$router是VueRouter的实例方法,可以认为是全局的路由对象，包含了所有路由的对象和属性

2、$route是一个跳转的路由对象，可以认为是当前组件的路由管理，指当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据。如name, path等

6.如何让CSS只在当前组件中起作用?

当前组件<style>写成<style scoped>，这个参数的作用就是让css只在当前组件中起作用，如果不加的话，就相当于引入全局样式了

7.keep-alive-keep-alive-的作用是什么

<keep-alive></keep-alive> 是 Vue 内置组件，用于缓存组件的实例，从而避免多次创建和销毁组件的开销。当包裹动态组件时，<keep-alive> 会在组件切换时保留该组件的状态，而不是重新渲染该组件。常见的用法是将需要缓存的组件包裹在 <keep-alive> 标签中

8.在vue中使用插件的步骤

采用ES6的import ... from ...语法或CommonJS的require()方法引入插件

使用全局方法Vue.use( plugin )使用插件

可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

9.请列举出3个vue中常用的生命周期钩子函数

1. created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见

2. mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted被调用时 vm.$el 也在文档内。

3. activated: keep-alive组件激活时调用

10.什么是Vue SSR

vue官网上对此ssr的定义：Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

通俗解释：vue的组件是基于vnode的，整个html结构用js的vnode对象树来表达，那么服务端可以通过解析js对象树，在服务端提前生成具有实际表达作用的html字符串，在客户端(浏览器中)每次数据变化的时候通过新旧vnode对象树的对比用diff算法(vue diff算法不了解的可以去搜索一下)去寻找更新最小最优的变化集合，然后再去更新实际的dom。

关键点: 代码可以在客户端运行，也可以在服务端运行，服务端渲染通俗来说就是先在服务端运行，在服务端生成html结构并返回给客户端，接下里继续由客户端代码去完成交互。

解决的问题:

seo：搜索引擎的优先爬取级别是页面的html结构，当我们使用ssr的时候，服务端已经生成了与业务相关联的html，这样的信息对于seo是很友好的。

内容呈现：客户端无需等待所有的js文件加载完成即可看见渲染的业务相关视图（压力来到了服务端这边，这也是需要做权衡的地方，需要区分哪些由服务端渲染，哪些可以交给客户端）。

相关的弊端:

代码兼容：对于开发人员来讲，需要去兼容代码在不同环境的运行，vue ssr所需要的服务端环境是node，有一些客户端的对象，比如dom,windows之类的则无法使用。

服务器负载：相对于前后端分离模式下服务器只需要提供静态资源来说，ssr需要的服务器负载更大，所以在项目中使用ssr模式要慎重，比如一整套图表页面，相对于服务端渲染，可能用户不会在乎初始加载的前几秒，可以交由客户端使用类似于骨架屏，或者懒加载之类的提升用户体验。