Vue小结---面试题

1. 什么是MVVM？

• MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
• 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
• ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

2. mvvm和mvc区别？它和库jquery的区别是什么？哪些场景适合？

• mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

• 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

• 场景：数据操作比较多的场景，更加便捷.

3. vue的优点是什么？

• 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
• 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

4. 组件之间的传值？

5. 路由之间跳转

• 模板声明式（标签跳转） 模块编程式（ js跳转）

6. vue.cli中怎样使用自定义的组件

1. 第一步：在components子组件目录新建你的组件文件（indexPage.vue），script一定要export default {}
2. 第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’
3. 第三步：注入到vue的子组件的components属性上面,components:{indexPage}
4. 第四步：在template视图view中使用，单标签双标签

7. v-show和v-if指令的共同点和不同点？

8. 如何让CSS只在当前组件中起作用

将当前组件的<style>修改为<style scoped>

9. <keep-alive></keep-alive>的作用是什么?

失活缓存，<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

10. 生命周期相关

• 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

11. 什么是vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

12. vue生命周期的作用是什么

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

13. 第一次页面加载会触发哪几个钩子

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

14. DOM 渲染在 哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了。

15. 简单描述每个周期具体适合哪些场景

16. vue-loader是什么？使用它的用途有哪些？

• 解析.vue文件的一个加载器。
• 用途：js可以写es6、style样式可以scss或less、template可以加jade等.

17. 为什么使用key？

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

18. 为什么避免 v-if 和 v-for 用在一起

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

19. VNode是什么？虚拟 DOM是什么？

Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。

20. Vue的优缺点是什么

• 优点：低耦合，可重用性，独立开发，可测试，渐进式
• 缺点：不利于SEO搜索引擎优化，社区维护力度不强，相比还不够成熟

21. 组件之间传值

• 父向子传值：属性传值，父组件通过给子组件标签上定义属性，子组件通过props方法接收数据；

• 子向父传值：事件传值，子组件通过$emit(‘自定义事件名’，值)，父组件通过子组件上的@自定义事件名=“函数”接收

22. vue的template的理解

通过compile编译template生成AST语法树，AST语法树经过generate转化为render function字符串后返回虚拟DOM节点(Vnode)的过程

23. 单页面和多页面的区别

24. vue与node和npm关系

1. node功能
   
2. webpack
   
3. 关系梳理