前端面试题vue—(MVC、MVVM、MVP理解；组件通信)

对MVC、MVVM、MVP的理解

Model: 模型层（用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，数据模型或业务模型，就是我们要显示给用户查看的内容）
View: 视图层（渲染页面，用户直接看到的界面）
Controller: 控制器（M和V之间的连接器，用于控制应用程序的流程，及页面的业务逻辑）
MVC特点：
MVC模式的特点在于实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。在客户端web开发中，就是将模型(M-数据、操作数据)、视图(V-显示数据的HTML元素)之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。
1、View 传送指令到 Controller ；
2、Controller 完成业务逻辑后，要求 Model 改变状态 ；
3、Model 将新的数据发送到 View，用户得到反馈。

MVC优点：
1、耦合性低，视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和制器代码。
2、重用性高
3、生命周期成本低
4、MVC使开发和维护用户接口的技术含量降低
5、可维护性高，分离视图层和业务逻辑层也使得WEB应用更易于维护和修改
6、部署快

MVC缺点：
1、不适合小型，中等规模的应用程序，花费大量时间将MVC应用到规模并不是很大的应用程序通常会得不偿失。
2、视图与控制器间过于紧密连接，视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。
3、视图对模型数据的低效率访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

MVP（Model-View-Presenter）是MVC的改良模式，由IBM的子公司Taligent提出。和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责显示只不过是将 Controller 改名为 Presenter，同时改变了通信方向

MVP特点：
1、M、V、P之间双向通信。
2、View 与 Model 不通信，都通过 Presenter 传递。Presenter完全把Model和View进行了分离，主要的程序逻辑在Presenter里实现。
3、View 非常薄，不部署任何业务逻辑，称为”被动视图”（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
4、Presenter与具体的View是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更View时候可以保持Presenter的不变，这样就可以重用。不仅如此，还可以编写测试用的View，模拟用户的各种操作，从而实现对Presenter的测试–从而不需要使用自动化的测试工具。

与MVC的区别：
1、在MVP中，View并不直接使用Model，它们之间的通信是通过Presenter
(MVC中的Controller)来进行的，所有的交互都发生在Presenter内部。
2、在MVC中，View会直接从Model中读取数据而不是通过 Controller。
** MVP优点**：
1、模型与视图完全分离，我们可以修改视图而不影响模型；
2、可以更高效地使用模型，因为所有的交互都发生在一个地方——Presenter内部；
3、我们可以将一个Presenter用于多个视图，而不需要改变Presenter的逻辑。这个特性非常的有用，因为视图的变化总是比模型的变化频繁；
4、如果我们把逻辑放在Presenter中，那么我们就可以脱离用户接口来测试这些逻辑（单元测试）。
MVP缺点：
视图和Presenter的交互会过于频繁，使得他们的联系过于紧密。也就是说，一旦视图变更了，presenter也要变更。
MVP应用：
可应用与Android开发。

MVVM
Model：实体模型，代表基本业务逻辑
View：对应于Activity和xml，负责View的绘制以及与用户交互
ViewModel：将view和model联系在一起，起到桥梁的作用，负责完成View于Model间的交互,负责业务逻辑
MVVM优点：
1、MVVM模式和MVC模式类似，主要目的是分离视图（View）和模型（Model），有几大优点：
2、低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
3、可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
4、独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
5、可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写。

组件通信

父传子：
在父组件中，通过 :child的方式把想传递的count传递到子组件。子组件通过定义props来接受传递的参数。然后就可以使用

 props:{
      child1:{
          type:Number, //规定了参数的类型
          default:""   //规定参数的默认值
      }
  },

子传父：
子组件传递给父组件 需要 this.$emit('name1',params) 这个样式把你想传递的参数传递出去 this.$emit('select') 。然后在父组件中 通过 @select 这个名字把想传递的参数传递给父组件 ，父组件定义方法，获取参数

 methods:{
    addChild(){
        this.count += 1;
    }
  },

兄弟传值：

• 需要添加一个bus 来做中间人类似。新建bus.js 文件 里面重新new 一个Vue
• 可以借助于父组件作为中转完成通信 子 > 父 > 子
• 中央通信
  目前中央通信是解决组件通信的最佳方法。
  无需关注组件嵌套层级，也无需关注组件关系、
  $emit - 完成发布
  $on - 监听订阅

let bus = new Vue() // 空实例
// 组件A
Vue.component('Aaa', {
    template: `我是A组件`,
    methods: {
        aaa() {
            bus.$emit('is-selected')
        }
}
});
// 组件B
Vue.component('Bbb', {
    template: `我是B组件`,
    created() {
        bus.$on('is-selected', function () {
        console.log('我是B组件');
    })
}
});
//Vue实例
new Vue({
    el: '#app'
})