web前端 vue 面试题（二）

1. 请说下什么是动态组件，如何使用，以及 keep-alive 的作用

动态组件：让多个组件使用同一个挂载点，并动态进行切换。这就是动态组件

如何使用：通过保留元素，动态的绑定它的 is 特性，可以实现动态组件

keep-alive:

包裹动态组件(组件)时，会缓存不活动的组件实例,而不是销毁

它们组件切换调用的时候本身会被销毁掉的，只要加上keep-alive 进行包裹，就不会被销毁，而是被缓存起来,下一次使用的时候直接从缓存中调用

< keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素

常用的一些属性：

• include:

  类型：字符串或者正则表达式

  解释：只有名称匹配的组件会被缓存

• exclude:

  类型：字符串或者正则表达式

  解释：任何名称匹配的组件都不会被缓存

• max:

  类型:数字

  解释：最多可以缓存多少组件实例

2. 当使用了 keep-alive 内置组件后组件会增加哪两个生命周期函数？

activated&&deactivated:

• activated：当组件为活跃状态的时候触发(活跃状态：进入页面的时候)

• deactivated：缓存状态的时候触发

3. vue 中 solt 的使用方式，以及 solt 作用域插槽的用法

当组件当作标签使用的时候，如果需要在组件标签内部进行嵌套内容的时候，需要通过 template 组件包裹嵌套的内容，在组件内部通过 < slot>< /slot> 进行接收

4. 为什么在组件内部 data 是一个函数而不是一个对象？

因为每次调用组件的时候都会重新生成一个对象,如果是一个对象的情况下，data 数据会进行复用(因为对象是引用数据类型),而当 data 是一个函数的时候每次调用的时候就会返回一个新的对象

5. vue 中动画如何实现

哪个元素需要动画就给那个元素加 transition 标签进入时 class的类型分为以下几种

< name>-enter

< name>-enter-active

< name>-enter-to

离开时 class 的类型分为以下几种

< name>-leave

< name>-leave-active

< name>-leave-to

如果需要一组元素发生动画需要用标签

< transition-group>< transition-group>

6. 浅谈对路由的理解

什么是路由？

根据不同的 url 地址展示不同的页面或者数据，路由分为前端路由，和后端路由

前端路由：

1. 前端路由多用于单页面开发，也就是 SPA。

2. 前端路由是不涉及到服务器的，是前端利用 hash 或者 HTM5的 historyApi 来实现的，一般用于不同的内容展示和切换

7. 路由跳转的方式有哪几种？

1. a 标签进行跳转。例如<ahref="#/home">首页

2. router-link 进行跳转

   例如：<router-linkto="/home">首页< router-link>

3. 编程式路由 例如：this.$router.push()

8. 路由传值的方式有哪几种

1. 动态路由传值。例如：path:"/home/:id/name"; 接受的时候通过 this.$route.params

2. query 传值。因为在 url 中？后面的参数不会被解析，因此我们可以通过 query 进行传值。接受的时候通过this.$route.query

3. 路由解耦。在配置路由的时候添加 props 属性为 true,在需要接受参数的组件页面通过 props 进行接受

4. 编程式导航 this.$router.push({path:"/home",query:{}});

9. 请说出路由配置项常用的属性及作用？

路由配置参数：

• path:跳转路径

• component:路径相对于的组件

• name:命名路由

• meta:路由元信息

• children:子路由的配置参数(路由嵌套)

• props:路由解耦

• redirect:重定向路由

10. 编程式导航使用的方法以及常用的方法

路由跳转：this.$router.push()

路由替换 :this.$router.replace()

后退：this.$router.back()

前进：this.$router.forward()

---

---

• web 前端 vue 面试题（一）
• web 前端 vue 面试题（二）
• web 前端 vue 面试题（三）
• web 前端 vue 面试题（四）
• web 前端 vue 面试题（五）