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 地址展示不同的页面或者数据,路由分为前端路由,和后端路由
前端路由:
-
前端路由多用于单页面开发,也就是 SPA。
-
前端路由是不涉及到服务器的,是前端利用 hash 或者 HTM5的 historyApi 来实现的,一般用于不同的内容展示和切换
7. 路由跳转的方式有哪几种?
-
a 标签进行跳转。例如<ahref="#/home">首页
-
router-link 进行跳转
例如:<router-linkto="/home">首页< router-link>
-
编程式路由 例如:this.$router.push()
8. 路由传值的方式有哪几种
-
动态路由传值。例如:path:"/home/:id/name"; 接受的时候通过 this.$route.params
-
query 传值。因为在 url 中?后面的参数不会被解析,因此我们可以通过 query 进行传值。接受的时候通过this.$route.query
-
路由解耦。在配置路由的时候添加 props 属性为 true,在需要接受参数的组件页面通过 props 进行接受
-
编程式导航 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()