前端面试题之第四弹

一、对MVC、MVVM、MVP的理解

——MVC

M 表示 Model，专门用来处理数据模型。
V 表示 View，专注页面布局和数据显示。
C 表示 Controller 专注于控制，执行业务逻辑，操作模型和视图。

MVC的数据之间通信都是单向的

View(视图层)传达指令到Controller(控制层)
Controller(控制层)完成业务逻辑后，要求Model(模型层)改变状态
Model(模型层)将新的数据发送到View(视图层)，用户得到反馈

在MVC中，虽然View与Model之间的耦合度非常小，只需要Model修改的时候通知View发生改变即可，但是它们之间还有很重要的联系，于是，就有了MVP

——MVP

M 表示Model，专门用来处理数据模型
V 表示View，专门用来处理用户视图
P 表示Presenter，用来处理业务逻辑，在MVC的基础上，修改了通信方向

MVP中，View和Model之间没有任何通信关系，所有的通信和业务逻辑都放在Presenter层中

View(视图层)发送指令到 Presenter层
Presenter层 处理业务逻辑，要求Model(模型层)改变状态
Model(模型层)修改状态之后，发送指令到Presenter层
Presenter层通知View(视图层)做出改变

MVP中，所有的通信都是双向的，View和model不会直接发生通信，都通过Presenter层进行传递
在MVP中，所有的业务逻辑都写在Presenter层中，会导致Presenter层过于臃肿
在MVP中，View只负责显示视图，不包含任何业务逻辑，导致View层过薄，不具备任何主动性
由于在MVP模式中，所有的业务逻辑都放在Presenter层中，必须通过Presenter层来修改View层的界面，所以出现了MVVM

——MVVM

M 表示Model，专门用来处理数据模型

V 表示View，专门用来处理用户视图

VM表示ViewModel，用来使的View视图层与Model层双向绑定，View的任何变动都会通知ViewModel，而Model的任何变动，也都会通知ViewModel，而不论哪一项发生改变，都会使对应的视图/数据模型同步发生改变

在MVVM中，于MVP一样，所有的通信都是双向的，数据与视图不直接发生依赖，全部通过VM层来进行双向绑定

所有的业务逻辑都由VM来进行处理，但是在View层和Model层修改都会通过VM来双向的绑定修改

Vue生命周期

什么是生命周期：
Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据，编译模板、挂在Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。

beforeCreated(实例创建前)

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el和data并未初始化，因此无法访问methods，data，computed等上的方法和数据。

created(实例创建后)

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data数据的初始化，el没有。然而，挂在阶段还没有开始，$el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过Vue的响应式绑定体现在页面上，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount(实例挂载前)

挂在开始之前被调用，相关的render函数首次被调用(虚拟Dom)，实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data初始化，注意此时还没有挂在html到页面上。

mounted(实例挂载完成)

挂载完成，也就是模板中过的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate(更新前)

在数据更新前之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated(更新后)

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestrioy(销毁前)

在实例销毁之前调用，实例仍然完全可用

1. 这一步还可以用this来获取实例
2. 一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件

destroyed(销毁后)

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

三、computed 和 watch的区别

计算属性(computed)
官方对于计算属性的解释是：

对于任何复杂逻辑，你都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新赋值。

直接引用官方文档的例子：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
});

侦听器(watch)

Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式时最有用的。

官方文档很清晰地表达了，watch是在执行一些复杂的操作时候使用的。更直观的例子，我们可以看下官方对computed和watch的对比：
以下代码是针对fullname这个属性的监听：

  <div id="demo">{{ fullName }}</div>

使用watch：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

使用computed：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

可以明显的看出，在执行简单的计算操作时，computed比watch更简洁易读。

总结：

1. 如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适。
2. 如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

参考资料：
Vue–计算属性和侦听器

未完待续…