Vue.js面试题（一）

1. ★★★ 如何再Vue的单文件组件里的样式定义全局CSS？

在style标签上不加上scoped的属性，默认为全局css样式

2. ★★ vue-router 3.1.0 新增的v-slot属性怎么用？

router-link 通过一个作用域插槽暴露底层的定制能力。

这是一个更高阶的 API，主要面向库作者，但也可以为开发者提供便利，

多数情况用在一个类似 NavLink 这样的自定义组件里。

在使用 v-slot API 时，需要向 router-link 传入一个单独的子元素。

否则 router-link 将会把子元素包裹在一个 span 元素内。

3. ★★★ 如何实现一个路径渲染多个组件？

可以通过命名视图(router-view)，它容许同一界面中拥有多个单独命名的视图，

而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

通过设置components即可同时渲染多个组件。

4. ★★★ 如何实现多个路径共享一个组件？

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

5. ★★★ 如何监测动态路由的变化

可以通过watch方法来对$route进行监听，

或者通过导航守卫的钩子函数beforeRouteUpdate来监听它的变化。

6. ★★★ 对MVC，MVP，MVVM的理解

mvc 和 mvvm 其实区别并不大。都是一种设计思想。

主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。

mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

当 Model 频繁发生变化，开发者需要主动更新到 View 。

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。

1、Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；

View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，

ViewModel 是一个同步 View 和 Model 的对象。

2、在 MVVM 架构下，View 和 Model 之间并没有直接的联系，

而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，

因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

3、ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，

而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，

因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，

复杂的数据状态维护完全由 MVVM 来统一管理。

7. ★★ 说一下r o o t ， root，root，parent，$refs

$r o o t ，和 root，和root，和parent都能访问父组件的属性和方法，

区别在于如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，

通过root 访问得到的是根父组件。

通过在子组件标签定义 ref 属性，在父组件中可以使用$refs 访问子组件实例。

8. ★★★★★ 你知道Vue响应式数据原理吗？Proxy 与 Object.defineProperty 优劣对比？

响应式原理

vue的响应式实现主要是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。在组件初始化时会给每一个data属性注册getter和setter，然后再new 一个自己的Watcher对象，此时watcher会立即调用组件的render函数去生成虚拟DOM。在调用render的时候，就会需要用到data的属性值，此时会触发getter函数，将当前的Watcher函数注册进sub里。当data属性发生改变之后，就会遍历sub里所有的watcher对象，通知它们去重新渲染组件。

proxy的优势：

Proxy 可以直接监听对象而非属性，可以直接监听数组的变化；

Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；

Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

Object.defineProperty 的优势:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill(垫片)来弥补

9. ★★★★ Composition API 的出现带来哪些新的开发体验，为啥需要这个？

• 在Compostion API 中时根据逻辑相关组织代码的，提高可读性和可维护性，类似于react的hook写法。
• 更好的重用逻辑代码，在Options API中通过MIxins重用逻辑代码，容易发生命名冲突且关系不清。
• 解决在生命周期函数经常包含不相关的逻辑，但又不得不把相关逻辑分离到了几个不同方法中的问题，如在mounted中设置定时器，但需要在destroyed中来清除定时器，将同一功能的代码拆分到不同的位置，造成后期代码维护的困难。

10. ★★★ 什么情况下使用 Vuex

如果应用够简单，最好不要使用 Vuex，一个简单的 store 模式即可，

需要构建一个中大型单页应用时，使用Vuex能更好地在组件外部管理状态

11. ★★★ Vuex可以直接修改state的值吗？

可以直接修改，但是极其不推荐，

state的修改必须在mutation来修改，

否则无法被devtool所监测，无法监测数据的来源，无法保存状态快照，

也就无法实现时间漫游/回滚之类的操作。

12. ★★★★ 为什么Vuex的mutation不能做异步操作

Vuex中所有的状态更新的唯一途径都是mutation，

异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，

从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，

否则无法被devtools所监测。

如果mutation支持异步操作，就没有办法知道状态是何时更新的，

无法很好的进行状态的追踪，给调试带来困难。

13. ★★★ v-model和vuex有冲突吗？

用法上不冲突，但是设计理念不一致。

双向绑定的理念是，双向数据流，数据和视图可以互相改变，用法简单但可维护性差。

vuex 的理念是，单向数据流，用法复杂但是可维护性强。

14. ★★★ 解释单向数据流和双向数据绑定

对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性称为单向数据流，

单向数据流（Unidirectional data flow）方式使用一个上传数据流和一个下传数据流进行双向数据通信，

两个数据流之间相互独立，单向数据流指只能从一个方向来修改状态。

双向数据绑定即为当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，两个数据流之间互为影响。

15. ★★ Vue 如何去除url中的#

将路由模式改为history

16. ★★★ 和route和route 和 router 的区别

$route用来获取路由的信息的，它是路由信息的一个对象，里面包含路由的一些基本信息，

包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom等。

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

17. ★★ 对比 jQuery，Vue 有什么不同

jQuery 专注视图层，通过直接操作 DOM 去实现页面的一些逻辑渲染；

Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作。

Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发

18. ★★★ Vue 中怎么自定义指令

通过directive来自定义指令，自定义指令分为全局指令和局部指令，

自定义指令也有几个的钩子函数，常用的有bind和update，当 bind 和 update 时触发相同行为，

而不关心其它的钩子时可以简写。

一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。

19. ★★★ Vue 中怎么自定义过滤器

通过filter来定义过滤器，过滤器分为全局和局部过滤器，

过滤器的主体为一个普通的函数，来对数据进行处理，可以传递参数。

当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，

局部过滤器优先于全局过滤器被调用。

20. ★★★ Vue 等单页面应用的优缺点

优点

1单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。

2、单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象

3、单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。

4、良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。

缺点

1、首次加载耗时比较多。

2、SEO问题，不利于百度，360等搜索引擎收录。

3、容易造成Css命名冲突。

4、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。

Vue.js面试题（二）https://developer.aliyun.com/article/1399412?spm=a2c6h.13148508.setting.14.59904f0eEJICdO