1.v-model的作用

v-model本质上不过是语法糖，可以用v-model指令在表单及元素上创建双向绑定数据。
1.根据控件类型自动选取正确的方法来更新元素。
2.负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理。
3.v-model会忽略所以表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源，因此我们应该通过JS在组件的data中声明初始值。

2.v-model实现原理

v-model只不过是一个语法糖而已，真正实现靠的还是：
1.v-bind：绑定响应式数据。
2.触发oninput事件并传递数据。

3.Vue2.0双向绑定的缺陷

Vue2.0数据响应采用的是数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，但是它不算是实现数据响应式的完美方案，某些情况下需要对其进行修补或者hack这也是它的缺陷。具体如下：
1.vue实例创建后，无法检测到对象属性的新增或删除，只能追踪到数据是否被修改。
解决方案：

Vue.set(obj,propertName/index,value)

2.不能监听数组的变化。
重写数组的prototype对应的方法来解决。
（具体解决方案待补充）

4.Vue3.0实现双向绑定的方法

Proxy
Proxy是ES6中新增的一个特性，翻译即“代理”。
相比2.0的优势：
1.可以劫持整个对象，并返回一个新对象。
2.有13中劫持操作。

5.Vuex

5.1what

Vuex是专门为Vuejs应用程序设计的状态管理工具。采用集中式存储管理应用的所有组件的状态，并以响应的规则保证状态以一种可预测的方式发生变化。
具体工作：vuex是一种状态管理机制，将全局组件的共享状态抽取出来为一个store，以一个单例模式存在，应用任何一个组件中都可以使用，vuex更改state的唯一途径是通过mutation，mutation需要commit触发，action实际触发是mutation，其中mutation处理同步任务，action处理异步任务。

5.2每个属性

1.state：
state是存储的单一状态，是存储的基本数据。提供唯一的公共数据源，所有共享的数据统一放到store的state进行存储，在其中定义的数据，可以在任何组件中进行调用。---对应的全局数据为computed中的...mapState
2.Getters：
getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getters返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
3.Mutations：
mutations提交更改数据，使用store.commit方法更改state存储的状态。---触发命令对应commit，辅助函数为...mapMutations
4.Actions：
actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）---触发命令为dispatch，对应辅助函数为...mapActions
5.Module：
Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

5.3mutation和action有什么区别？

mutation：更改Vuex的store中的状态的唯一方法是提交mutation。
action：action类似于mutation，不同在于：
1.action提交的是mutation，而不是直接变更状态。
2.action可以包含任意异步操作。

6.修改ElementUI样式的几种方式？

6.1.新建全局样式表

新建global.css文件，并在main.js中引入。一般放在src->assets静态资源文件夹的style文件夹下。

6.2在当前vue单页面中添加一个新的style标签

新的style标签中不要加scoped属性。

6.3使用/deep/深度修改标签样式

在需要修改的ElementUI标签类名前加上/deep/，可以强制修改默认样式。

6.4通过内联样式或者绑定类样式覆盖默认样式

7.导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航。
简单地说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一个函数，这个函数能让你操作一些其他的事儿的时机。

8.vue-router实现懒加载

懒加载：当打包构建应用时，JS包会变得非常大，影响页面加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更高效了。
实现方法：
（待补充）

9.HashRouter和HistoryRouter的区别和原理

vue-router是Vue官方的路由管理器，默认hash模式，还有一种是history模式。
区别：
1.hash模式较丑，history模式较优雅。
2.pushState设置的新URL可以是与当前URL同源的任意URL；而Hash只可修改#后面的部分，故只可设置与当前同文档的URL。
3.pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中。
4.pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串。
5.pushState可额外设置title属性供后续使用。
6.hash兼容IE8以上，history兼容IE10以上。
7.history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误。

10.组件通信的方式

1. props和$emit（最常用的父子组件间通信方式）
2. $attrs和$listeners（爷孙组件间通信）
3. v-model（父子组件间）
4. provide和inject（父子、爷孙、祖孙组件间均可）
5. 全局事件总线（任意组件间通信 $bus.$on $bus.$emit 主要用于兄弟组件间通信）
6. parent和children
7. boradcast和dispatch（Vue1.0）
8. vuex

11.Vue生命周期以及钩子函数

11.1.beforeCreate函数

在实例初始化之后，此时还未开启数据监测和数据代理，因此无法通过vm访问到data和methods中的内容。

11.2Created函数

vue对象有值了，但是DOM还没有生成。可以通过vm访问到data中的数据、methods中配置的方法。最常用在此钩子函数中调用异步请求。

11.3beforeMount函数

此时虚拟DOM已经生成，但页面还不能显示解析好的内容。所以页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。

11.4mounted函数

模板编译已完成，数据挂载完毕。内存中的虚拟DOM已经转为真实DOM，所以页面呈现的是经过Vue编译的DOM，对DOM的操作均有效（尽可能避免）。一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。

11.5beforeUpdate函数

只有数据更新后，才能调用（触发）beforeUpdate，此时，数据是新的，但页面是旧的。即页面尚未和数据保持同步。

11.6updated函数

生成了新的虚拟DOM，完成了Model->View的更新。此时，数据是新的，页面也是新的。

11.7beforeDestory函数

此时，vm中所有的：data、method、指令等等都处于可用状态，马上要执行销毁过程。一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等等收尾操作。

11.8destoryed函数

此时组件已销毁。
注意：页面关闭、刷新，路由跳转都会导致组件销毁。手动销毁可以使用v-if和key值。

12.vue keep-alive

（这部分对应尚硅谷vue基础markdown文件的缓存路由组件部分）
keep-alive：可以实现组件缓存，是Vue.js的一个内置组件。
作用：
1.能够把不活动的组件实例保存在内存中，而不是直接销毁。
2.它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。
使用方式：
1.常用的两个属性include/exclude，允许组件有条件的进行缓存。
2.两个生命周期activated：/deactivated，用来得知当前组件是否处于活跃状态。activated：路由组件被激活时触发。deactivated：路由组件失活时被触发。
3.keep-alive中还运用了LRU算法。（待了解）

13.vue的特性

1. 表单操作
2. 自定义指令
3. 计算属性
4. 过滤器
5. 侦听器
6. 生命周期

14.v-if和v-show

都用来显示隐藏元素，渲染页面。v-if还有一个v-else配合使用，两者达到的效果一样，但是v-if更消耗性能，因为v-if在显示隐藏过程中有DOM的添加和删除，v-show只是操作css。

15.v-for中key的理解

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。主要是为了高效的更新虚拟DOM。

16.computed和watch的区别

computed：计算并返回，只有当被计算的属性发生改变时才会触发。
watch：监听某一个值，当被监听的值发生变化时，执行相关操作。
与computed相比，watch更加适用于监听某一值的变化，并做对应操作。computed更适用于计算已有的值并返回结果。

17.MVC和MVVM的区别

MVC：MVC是应用最广泛的软件架构之一，一般MVC分为：Model（模型）、View（视图）、Controller（控制器）。View一般通过Controller来和Model联系。三者之间基本都是单向联系。
MVVM：MVVM是吧MVC中的Controller改编成了ViewModel。View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上显示，通过数据来显示图层。
区别：
1.MVC中的Controller演变成MVVM中的ViewModel。
2.MVVM通过数据来显示图层而不是节点操作。
3.MVVM解决了MVC中大量dom操作使页面渲染性能降低，加载速度变慢，影响用户体验的问题。

18.单页应用优缺点

优点：
1.良好的交互体验
2.良好的前后端工作分离模式
3.减轻服务器压力
缺点：
1.首屏加载慢
2.不利于SEO
3.不适合开发大型项目

19.虚拟DOM和Diff算法

1.虚拟DOM
即虚拟DOM节点，通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点。
2.diff算法
传统的Diff算法也是一直都有的。diff算法会对比新老虚拟DOM，记录下他们之间的变化，然后将变化的部分更新到视图上。
3.dom-diff原理
dom-diff算法会比较前后虚拟DOM，从而得到patches（补丁），然后与老Virtual DOM进行对比，将其应用在需要更新的地方。将复杂度降低，得到新的Virtual DOM。

20.模块化、组件化、工程化

工程化：模块化和组件化是工程化的表现方式。工程化是将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的。
模块化：一个模块就是一个实现特定功能的文件。
模块化优势：1.避免变量污染，命名冲突。2.提高代码复用率。3.提高维护性。4.依赖关系的管理。
组件化：页面上的每个独立的、可视/可交互区域视为一个组件。