vue面试题整理（1.0）

一、对MVC，MVP，MVVM的理解

三者都是项目的架构模式（不是类的设计模式），即：一个项目的结构，如何分层，不同层负责不同的职责。

1.MVC

MVC的出现是用在后端（全栈时代）

M：model，模型：

主要完成业务功能，在数据库相关的项目中，数据库的增删改查属于模型。没有页面，是纯粹的逻辑。

V：view，视图：

主要负责数据的显示（HTML+CSS，动态网页（jsp，含有HTML的PHP文件））页面的展示和用户的交互。

C：controller，控制器：

主要负责每个业务的核心流程，在项目中体现在路由以及中间件上（nodeJs中的routes文件夹）

2.MVP

MVP是把MVC中的C改成了P。主要限制了M和V之间不能直接通信（互相调用，传递数据）。M和V之间的通信必须经过P。

P：Presenter，表示器

主要用于连接M层、V层，完成Model层与View层的交互，还可以进行业务逻辑的处理。

3.MVVM：

MVVM是把MVP中的P改成了VM。主要体现的是M和V之间的双向绑定。View的变动可以同步相应在Model，反之亦然。Vue就是一个MVVM的框架。准确来说，使用Vue框架完成项目时，使用的是MVVM模式。

VM：ViewModel

主要完成M和V的数据通信，并且是双向绑定。而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

总结：所有的MV*的项目的架构模式：都是为了完成项目代码的职责分工。

二、v-if和v-show区别

相同点：都是用来控制Dom元素的显示和隐藏。

不同点：

1.原理上：

v-if是通过添加和删除Dom元素，来控制Dom元素的显示和隐藏。

v-show是通过控制Dom元素样式的display属性的值，来控制Dom元素的显示和隐藏。

2.性能损耗

v-if：性能损耗主要体现在频繁切换时

v-show：性能损耗主要体现在首次。

3.应用场景：

v-if：用于切换不频繁的场景

v-show:用于切换频繁的场景。

4.安全性：
v-if:安全性好。（如果Dom元素不显示时，在Elements里根本看不到）

v-show:安全性不好。（如果Dom元素不显示时，在elements里依然可以看到，那么，懂程序的人，既可以修改）

三、computed和watch的区别

1.相同点：

都可以监听数据

2.不同点：

（1）概念：

computed：是计算属性，依赖其他属性值，并且computed的值有缓存，当依赖的属性值发生改变时，才会重新计算computed的值，默认是只读的（相当于getter函数），它也可以设置getter和setter函数来完成读和写。

watch：监听器，更多的是观察的作用，每当监听的数据变化时都会执行回调进行后续操作，它只能设置getter。watch默认只监听一层，如果要深度监听，让deep属性为true。

（2）作用：

computed：为了显示而用，降低了模板上代码复杂度。

watch：属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数。主要处理异步以及开销比较大的操作。简单粗暴的理解为：一个函数的执行时机。

（3）依赖模板调用：

computed：只能在模板上使用。

watch：不能在模板上使用。

（4）是否异步：

computed：不能有异步，只能同步。

watch：可以有异步。

（5）立即执行：

computed：是立即执行。

watch:默认不是立即执行。如果要立即执行，增加属性：immediate。

补充：在写代码时，把函数定义和调用时机分开。

四、Vue2的响应式原理

响应式：当js中的数据发生变化时，模板上会对应的发生变化。

1.数据劫持：

目的：当数据发生变化时，Vue框架会感知到。

怎么做的：利用ES5的Object.defineProperty（）。当实例化组件时，Vue框架内部会把定义在组件data里的所有数据（属性），进行遍历，给每个数据（属性）增加setter和getter函数（同时会做订阅）。当数据发生变化时，会调用setter函数。当获取数据时，会调用getter函数。

2.发布订阅者模式：

目的：当数据发生变化时（其实就是调用setter函数时），会发布给所有订阅者。

怎么做的：当Vue组件实例化时，Vue框架内部会扫描模板，让模板上使用Vue语法（指令，{{}}等）的Dom元素去订阅对应的数据的变化。然后，当数据变化时，会更新所有订阅该数据的模板。

五、Vue3的响应式原理：

1.数据劫持：用proxy替换了Object.defineProperty。Proxy不需要循环，速度比Object.defineProperty快10倍。同时也解决了数组的劫持。（Vue2中用下标的方式改变数组不是响应式的）

2.发布订阅者模式：

内部有个Track函数：相当于订阅。

内部有个Trigger函数：相当于发布。

六、双向绑定的原理

1.双向绑定：视图层发生变化时，模型层会变化。模型层变化时，视图层会变化。

2.原理：

（1）通过事件和属性完成。

事件完成的：视图层影响模型层。

属性完成的是：模型层影响视图层(背后就是响应式原理)

3.Vue针对官方标签使用v-model指令，v-model指令针对不同的官方标签使用不同事件和属性。

（1）、针对文本框（单行和多行）：value属性和Input事件。如果加上修饰符lazy。事件就变成了Change事件。

（2）、针对radio：使用的checked属性和Change事件。同时，需要给radio加上value属性。

（3）、针对checkbox：使用的checked属性和change事件。

（3.1）、如果应用在多选时，需要给checkbox加上value属性。

（3.2）、如果应用在单选时，不需要加。

（4）、针对select：使用value属性和change事件。

七、单项数据流

1.单项数据流是什么：

单项数据流是指父组件可以修改子组件的数据，反之不行（子组件不能修改父组件的数据）。

2.Vue框架的单项数据流：

Vue框架的Props是单项数据流。即：父组件可以修改子组件的Props。子组件不能通过修改Props的方式来修改父组件的数据（data），否则：

（1）、造成数据混乱：如：一个父级组件的数据传递给多个子组件，某个子组件如果通过Props修改父组件的数据，父级组件再修改其他子组件，其他子组件就会莫名其妙的被修改，造成数据混乱。

（2）、框架会给程序员爆出一个警告（特指：父组件给子组件传递的Props来自父组件的数据）

3.当父级的数据更新时，子组件的Props也会随之更新。

八、keep-alive

keep-alive是Vue提供的组件。

它有三个特征：

（1）、组件作用：keep-alive可以缓存组件及其状态（数据），避免了组件的频繁创建和销毁所带来的性能损耗。一般结合路由和动态组件一起使用。

（2）组件属性：提供include和exclude属性。include表示只有名称匹配的组件会被缓存，exclude表示任何名称匹配的组件都不会被缓存，其中exclude的优先级比include高。两者都支持字符串或正则表达式。

（3）keep-alive会触发两个钩子函数：activated和deactivated，当组件被移除时，触发钩子函数deactivated。

九、SPA的理解：

（1）单页面应用的概念：

SPA：single page application，单页面应用

就是整个项目只有一个HTML页面（文件），首次加载时，把所有的HTML，css，js全部加载下来。通过操作Dom的删除和创建（添加）来完成页面的切换。

（2）单页面应用优缺点

优点：单页面应用相对服务器压力小【因为：首次、或者只要HTML，css和js加载完毕后，切换页面是不用再去服务器请求HTML，css和js，而是直接操作Dom】

2.局部刷新，所以，用户体验好。【通过删除，添加，修改Dom的方式】

3.前后端分离

4.页面效果比较炫酷（比如切换页面内容时的转场动画）

缺点：

不利于搜索引擎优化SEO（search engine optimization）。如：百度，360等搜索引擎搜索、

2.初次加载时耗时多（可以使用路由懒加载解决）

3.导航不可用，如果一定要导航需要自行实现前进、后退（Vue-Router做好了）。页面复杂度提高很多。

4.容易造成css命名冲突【用scoped或者BEM的方式解决】

十、请问怎么理解虚拟Dom和Diff算法

1.什么是虚拟Dom和Diff算法：

虚拟Dom：用JS对象模拟的真实Dom，该JS对象包含了真实Dom的所有属性和内容，

Diff算法：用来比较两个虚拟Dom的不同之处，并在旧的虚拟Dom树上打上标记。

2.虚拟Dom和Diff算法的作用：

虚拟Dom和Diff算法结合起来，用来提升性能。可以减少无效的Dom渲染，即：减少了无效的重排和重绘。

3.步骤（思路，流程）

（1）产生两个虚拟Dom树：newVDom，oldVDom

（2）oldVDom和真实Dom树保持一致

（3）数据变化时，影响的是newDom

（4）操作newVDom后，通过Diff算法对比newVDom和oldVDom的差异