目录：

1、对MVC 、MVVM、MVP的理解

2、详述Vuex工作流程

3、谈谈对对$nextTick的理解及使用场景

4、渐进式框架的理解

5、组件样式属性 scoped 问题及解决方法

1、MVC 、MVVM、MVP的理解

MVC

mvc 各层的职责：

Models: 数据层，负责数据的请求和存储以及处理

View: 展示层，负责View和动画效果的展示，以及用户的交互

Controller: 控制器层，负则连接View和Model，对view的交互事件有controller层处理传递给model，model处理再交互传递给Controller，Controller传递给view

M和View应该是完全隔离的，由C作为中间人来负责二者的交互，同时三者是完全独立分开的，这样可以保证M和V的可测试性和复用性，但是一般由于C都是为特别的应用场景下的M和V做中介者，所以很难复用。

优点: 

1、增强代码复用耦合性低，

2、解决代码臃肿，页面样式在v 层 ，业务逻辑在M层

3、易拓展：无论产品想增加或者模块，只需增加响应的MVC模块

4、可维护：各个模块相互隔离，哪里出错改哪里，不影响其他模块。

缺点：

1、简单的小型项目，使用MVC设计反而会降低开发效率层和层虽然相互分离，但是之间关联性太强，没有做到独立的重用。

2、对于简单的界面，严格遵循MVC，使模型、视图与控制器分离，会增加结构的复杂性，并可能产生过多的更新操作，降低运行效率

3、视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。

4、依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

MVP

MVP的由来： MVC的缺点在于并没有隔离View和Model层, MVP针对以上缺点做了优化, 它将业务逻辑和业务展示也做了一层隔离, 对应的就变成了MVCP. M和V功能不变, 原来的C现在只负责布局, 而所有的业务逻辑全都转移到了P层。P层处理完了业务逻辑，如果要更改view的显示，那么可以通过回调来实现，这样可以减轻耦合，同时可以单独测试P层的业务逻辑，MVP从视图层中分离了行为（事件响应）和状态（属性，用于数据展示），它创建了一个视图的抽象，也就是presenter层，而视图就是P层的『渲染』结果。P层中包含所有的视图渲染需要的动态信息，包括视图的内容（text、color）、组件是否启用（enable），除此之外还会将一些方法暴露给视图用于某些事件的响应。

MVP的职责

VC层：

生成的View添加到self.view上面

管理View的声明周期

通过P层去获取数据然后渲染到View上面展示。

Controller层：

生成view，实现view的代理和数据源

绑定view和presenter

调用presenter执行业务逻辑

负责界面跳转

View层：

监听P层数据更新通知，刷新页面展示

点击事件触发时调用P层响应的方法

界面元素搭建，动画展示

接受用户操作并提供反馈

Model层：

与MVC的model层一样

Persneter层：

实现view的事件处理逻辑，暴露相应的接口给view的事件调用

调用model的接口获取数据，然后加工数据，封装成view可以直接用来显示的数据和状态

两种情形：

1、让P持有V，P通过V的暴露接口改变V的显示数据和状态，P通过V的事件回调来执行自身的业务逻辑

2、让V持有P，V通过P的代理回调来改变自身的显示数据和状态，V直接调用P的接口来执行事件响应对应的业务逻辑

MVVM （Model-View-ViewModel ）

发展过程： MVVM其实是在MVP的基础上发展起来的 MVVM在MVP的基础上增加了数据绑定

2、详述Vuex工作流程

components  -> dispatch -> actions -> commit -> mutations -> state -> return ->component

    组件                  派发事件     异步操作                          改变状态     状态       返回到        组件

components  ->  commit  -> mutations -> state -> return ->component

     组件                委派事件       改变状态     状态         返回到        组件

3、谈谈对对$nextTick的理解及使用场景 

应用场景

        需要在视图更新之后，基于新的视图进行操作

文档说明

        在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

nextTick原理

1、异步说明

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新

2、事件循环说明

简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

created、mounted

在 created 和 mounted 阶段，如果需要操作渲染后的试图，也要使用 nextTick 方法。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

使用nexttick的三种情况

1、点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。

2、点击获取元素宽度。

3、使用 swiper 插件通过 ajax 请求图片后的滑动问题。

//具体使用 

this.$nextTick(callback函数) 

参考阅读：

https://segmentfault.com/a/1190000012861862?utm_source=tag-newest

作者：fozero文章出处：https://www.cnblogs.com/fozero声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

4、渐进式框架的理解

渐进式代表的含义是：主张最少。

渐进式——在原有项目中，可以先尝试引入一两个组件，可以当插件用....甚至也可以用它来开发整个项目！”

核心：想要啥就可以引用啥 

5、组件样式属性 scoped 问题及解决方法

两种理解：
 1、   Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素

2、　使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，这么设计的目的是父组件可以对子组件根元素进行布局。