Vue面试题整理

君子终日乾乾，夕惕若，厉无咎。

1：什么是MVVM？它和MVC还有MVP有什么区别？

它们都是以视图层、数据模型层、业务逻辑层的方式来组织代码的一种软件设计风格。分层有助于管理复杂的应用，你可以在一个时间内关注一个方面，如在不依赖业务逻辑的情况专注于视图层的开发设计，更有利于调试，测试等。

演变历史：MVC => MVP => MVVM

MVC：

M：model 数据模型层

V：view 视图层

C：controller 控制器（业务逻辑层）

过程：视图层（View）将用户的输入等交互动作得到信息传递给控制器(Controller)，由控制器处理具体的业务逻辑，然后将数据发送给模型(Model)。模型层操作数据库然后将新的数据返回给视图层。

MVP：

M：model 数据模型层

V：view 视图层

P：presenter 播报员（相当于MVC中的C，业务逻辑层）

过程：模型层(model)和视图层(view)并不直接进行交接，所有过程都通过中间人presenter来进行播报通信，preserter与view以及与model之前的通信都是双向的。

MVVM：

M：model 数据模型层

V：view 视图层

VM：viewModel（相当于MVP中的P，业务逻辑层）

过程：和MVP唯一的区别是，视图层和ViewModel层是双向数据绑定，视图层和ViewModel任何一方有变动都会直接反应在对方身上。

2：组件之间是怎么通信的？

1：子组件访问父组件

this.$parent

props传递

2：父组件访问子组件

自定义监听事件，父组件负责监听，子组件负责触发并将信息通过事件回调函数参数的形式返回。

ref  $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

3：祖先与子孙通信

$parent层层连接

依赖注入

借助vuex状态管理

3：说说v-show和v-if的区别？

v-if是真正的条件渲染，有组件销毁重建的完整过程，有更好的切换开销。同时v-if是惰性的，如果一开始v-if的值为false,它什么也不会做，知道值变为true才开始创建组件。

v-show一开始就会把所有的组件加载进来 ，只是单纯的切换css样式。所以它拥有更高的初始渲染开销。

根据具体情况决定用哪个更好，如果你有高频切换组件的可能就使用v-show好了，如果是切换频率并不高，就考虑用v-if。

4：如何使CSS只在当前组件有用？

1：

2：

对于组件库，我们应该更倾向于选用基于 class 的策略而不是 scoped attribute。

这让覆写内部样式更容易：使用了常人可理解的 class 名称且没有太高的选择器优先级，而且不太会导致冲突。

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

5：有什么用？

包裹动态组件，缓存不活动的组件，保留组件状态，避免不必要的重新渲染。

6：Vue中如何实现动态加载组件？或者说如何实现组件异步加载？

也就是懒加载。

Vue允许你以工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue只有在需要这个组件的时候才会触发这个工厂函数，且会把结果缓存起来供未来重新渲染。

与require()语法结合起来用，这个语法会告诉webpack自动将该引入的组件进行代码切割

返回一个promise，也就是() => import()

该工厂函数还可以返回如下格式的对象，可以定义组件未加载时的loading，以及加载失败的优雅降级等。

7：如何在Vue项目中实现图片懒加载？

使用插件vue-lazyload

8：为什么要用key来管理可复用元素？

保持两个相同元素的独立性。

因为在Vue中为了尽可能的高效渲染，它通常会复用已有的相同元素。

但这对于两个完全独立的相同元素来说是不科学的，所以加上key保证他们的独立性。相互不被彼此牵制干扰。

9：为什么不建议v-for和v-if用在同一个元素上？

因为v-for拥有更好的优先级，造成不必要的循环遍历，浪费资源影响性能。

可以先在computed中过滤数据后在做遍历。

或者将v-if移到容器类，这样就不会每次v-if都遍历完对象的所有值。

10：什么是mint-ui?

mint-ui 是vue移动端组件库。

11：Vue双向数据绑定的原理是什么？

其原理就是数据劫持结合发布者-订阅者模式来更新视图和数据。

通过Object.defineProperty()中的setter、getter劫持数据，然后通知订阅者数据变化，订阅者执行更新函数更新视图。

主要实现过程：

1：实现一个Observer劫持监听器，劫持数据监听变化，然后通知订阅器。

2：实现一个Watcher订阅者，订阅器Dep收到数据变化后会通知Watcher，Watcher调用自身的update()触发Compile中绑定的回调，更新视图。

3：实现一个解析器Compile，解析编译模板指令，初始化渲染视图，并为每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。

4：MVVM数据绑定入口，整合Observer、Watcher、Compile三者。

12：谈谈Vue的生命周期，有哪些钩子？

主要有四个阶段吧

1：实例创建阶段，初始化事件和生命周期

钩子：beforeCreate 、created

2：实例挂载阶段

钩子：beforeMount 、mounted

3：数据更新阶段

钩子：beforeUpdate 、updated

4：调用了vm.$destroy() 销毁阶段

钩子：beforeDestroy 、destroyed

13：Vue如何实现自定义指令？

自定义指令时可用的5个钩子

1：bind 一次性初始化设置，只调用一次，指令第一次绑定到元素时调用。

2：inserted 被绑定元素插入父节点时调用（仅保证父节点存在，并不代表就一定插入文档中了）

3：update 所在组件VNode更新时调用，可能发生在其子节点更新前。

4：componentUpdated  所在组件VNode及其子节点VNode更新完毕后调用。

5：unbind 只调用一次，在元素与指令解绑的时候调用。

14：Vue-router有哪些组件？

、

15：Vue-router动态路由匹配怎么实现？

路径配置的时候使用“动态路径参数”来实现。

如：/user/:id 这样/user/foo和user/bar都会匹配到/user这个页面。同时我们也可以通过this.$route.params.id获取foo和bar这两个值。

16：active-class是Vue-router中哪个组件的属性？有什么作用？

上边的属性

用于定义链接点击激活时的CSS样式。

17：在Vue-router中如何实现嵌套路由？

一级路由下边设置children属性配置子路由

18: 说说Vue-router的导航守卫，有哪些钩子？

完整的导航解析流程：

1：导航被触发

2：在失活的组件里调用离开守卫beforeRouteLeave

3：调用全局的前置守卫beforeEach

4：再重用的组件里调用beforeRouteUpdate守卫

5：在路由配置里调用beforeEnter

6：解析异步路由组件

7：在被激活的组件里面调用beforeRouteEnter

8：调用全局的beforeResolve

9：导航被确认

10：调用全局的afterEach （所有钩子中只有它没有next参数）

11：触发DOM更新

12：用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数