1、什么是Vue
- Vue是一套用于构建用户界面的渐进式的JavaScript框架。
- Vue 的核心库只关注视图层，方便与插件第三方库或既有项目整合。
- Vue.js 的目标是通过尽可能简单的 API 实现动态数据绑定和组合视图组件。
2、Vue的优点
- 1、轻量级的框架: 只关注视图层,是一个构建数据的视图集合,大小只有几十kb,Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
- 2、双向数据绑定:这是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
- 3、组件化: 通过组件，把一个单页应用中的各种模块拆分到一个个单独的组件中，只要先在父级应用中写好各种组件标签，并且在组件标签中写好要传入组件的参数，再分别写好各种组件的实现，然后整个应用就算做完了。
- 4、视图,数据,结构分离：使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
- 5、虚拟dom，更高的运行效率 ：基于虚拟dom一种可以预先通过 javascript 进行各种计算,把最终的 DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。
- 6、容易学习：对初学者友好、入门容易、学习资料多，拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件，拿来即用实现快速开发
3、什么是MVVM模式
- MVVM分为Model、View、ViewModel
- Model 代表数据模型，数据和业务逻辑都在Model层中定义；
- View 代表UI视图，负责数据的展示（html）；
- ViewModel 负责监听 Model 中数据的改变并且控制视图View的更新，处理用户交互操作；
MVVM的思想：Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在Model 中同步，实现数据双向绑定。
- 好处：这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。
-
4、什么是MVC模式
- MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。
- Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
- View（视图） - 视图代表模型包含的数据的可视化。
- Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。
MVC的思想：简单来说，就是Controller负责将Model的数据用View显示出来，将Model的数据展示给用户看，并处理用户对View界面的操作。
5、MVVM和MVC的区别
- 1、MVVM是对MVC的增强版，将MVC中Controller的数据和逻辑处理部分抽离出来，放在了ViewModel中，这样只需做好View与ViewModel的数据绑定既可。
- 2、MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验。当和Model频繁发生变化，开发者需要主动更新到View。
vue 的优点：
- 1、低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当 View变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
- 2、可重用性。把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。
- 3、独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
-4、 可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。
6、vue生命周期的理解
6-1、什么是vue的生命周期
- Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建(new Vue())、初始化数据、编译模板(created)、挂载Dom→渲染(mounted)、更新→渲染(update)、卸载(destory)等一系列过程，我们称这是Vue 的生命周期。
6-2、vue生命周期的作用是什么
- 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
6-3、vue生命周期总共有几个阶段
- 它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
6-4、第一次页面加载会触发哪几个钩子？
- 第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
6-5、DOM 渲染在 哪个周期中就已经完成？
- DOM 渲染在 mounted 中就已经完成了。
6-6、简单描述每个周期具体适合哪些场景？
7、v-if 和 v-show 的区别
| v-if 和 v-show 的区别 | |
|---|---|
| v-if | 会根据初始的条件（data里自己的定义的数据）来进行真正的渲染（组件真正的销毁和重建），如果条件为真，才会开始渲染条件块，如果条件为假，则不会渲染条件块。 |
| v-show | 不管初始的条件是什么，元素总是会被渲染，并且只是简单的基于 CSS display: none 或者 display: block 的属性进行切换。 |
共同点：
- v-if和v-show都是通过判断绑定数据的true\false来展示的
用法推荐：
- v-if更适合于带有权限的操作，渲染时判断权限数据，有则展示该功能，没有则删除。
- v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作。
- 综上，当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。
8、什么是Vuex
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
- （1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- （2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
- （3） 如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果应用够简单，最好不要使用 Vuex。一个简单的 store 模式就足够了。但是，如果需要构建一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
| Vuex模块 | |
|---|---|
| State | 基本数据，定义了应用状态的数据结构，可以在这里设置默认的初始状态 |
| Getter | 从基本数据派生的数据，允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性 |
| Mutation | 是唯一更改 store 中状态的方法，且必须是同步函数 |
| Action | 像一个装饰器，包裹mutations，使之可以异步。用于提交 mutation，而不是直接变更状态，可以包含任意异步操作 |
| Module | 模块化Vuex，允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中 |
9、Vue 的单向数据流的理解
- 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
- 这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop
都将会刷新为最新的值。 这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。 - 子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。