千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）

p14

1、怎么定义过滤器？过滤器有什么用？

首先，在vue3中已经将过滤器废弃掉了，只有在vue2中才能使用过滤器。

通过filter来定义过滤器，过滤器的主体分为一个普通的函数，来对数据进行处理，可以传递参数。所谓的过滤器就是将数据进行二次处理,得到我们想要的结果数据。

2、什么是单页面应用？单页面应用的优缺点？

单页面应用就是只有一个页面，当页面切换时切换的只是页面内的其中一块内容。

优点：

2.1、当页面改变时不需要重新加载新的页面。

2.2、页面切换之间没有白屏现象，也不会出现闪烁现象。

2.3、页面应用相对服务器压力较小。

2.4、前后端分离，可以让后端的一套代码可以在多端使用。

缺点：

首次加载需要的时间比较长。（解决方案：代码分割，路由懒加载等）

不利于搜索引擎的抓取

3、Vue-router使用params与query传参有什么区别？

query： name 和 path 都能用。用 path 的时候，提供的 path 值必须是相对于根路径的相对路径，而不是相对于父路由的相对路径，否则无法成功访问。地址栏显示参数格式为“?id=0&code=1”

params：只能用 name，不能用 path，地址栏不显示参数名称 id，但是有参数的值。

4、vue中Keep-alive的作用?

keep-alive是vue中的一个组件，可以使被包裹的组件保留当时的状态，避免重新渲染。当使用keep-alive包裹组件时，“mouted和created”钩子函数只会执行一次，当组件间切换回去时不会执行。当需要多次发送请求时，可以使用“actived和deactived”，这两个钩子发送请求，注意！这两个钩子只有keep-alive才有！

5、Vue中如何实现单页面应用？

5.1、hash模式：通过监听浏览器的onhashchange()事件变化，查找对应的路由规则。

5.2、history模式：history模式核心借用了HTML5 history的API，API提供了丰富的router相关属性：

history.pushState：浏览器历史记录添加记录

history.replaceState:修改浏览器历史记录中当前记录

history.popState:当history发生改变时触发

6、说一下vue中的常用指令以及它的用法

6.1 v-if 条件渲染

6.2 v-show 条件渲染

6.3 v-html 渲染时遇到标签解析标签

6.4 v-text 渲染时若遇到标签时不解析标签

6.5 v-on 点击事件

6.6 v-bind 绑定属性

6.7 v-model 双向绑定

6.8 v-for 循环遍历

7、如何实现多个路径共享一个组件？

只需要将多个路径的component的值设置为同一个组件即可。

8、如何检测动态路由的变化？

可以使用watch方法来对$route进行监听，或者通过路由守卫“beforeRouteUpdate”来进行监听。

9、vue中如何去除url中的#？去除之后会有什么问题？解决方案是什么？

去除url后的#号可以将路由模式更改为history模式；去除之后会出现用户在浏览器中直接访问“https://example.com/user/id”时，就会得到一个404错误；解决方案是在服务器上添加一个简单的回退路由，如果URL不匹配任何静态资源，他应提供与你的应用程序中的index.html相同的页面

10、$router和$route的区别是什么？

$route用来获取路由的信息，它是路由信息的一个对象，里面包含路由的一些基本信息，比如（name、meta、path、hash、query、params、fullpath、matched）等。

$router是主要用来操作路由的，它是VueRouter的实例，包含了一些路由跳转的方法push、replace、go，钩子函数等。