MVC/MVP/MVVM的理解

• Model: 业务处理和存储，数据更新后更新
• View: 人机交互接口，一般为展示给用户的界面

MVC

Controller控制层: 负责连接Model层和View层，接受并处理View层触发的事件，并在Model层的数据状态变动时更新View层

思路: View层通过事件通知到Controller层，Controller层经过对事件的处理完成相关业务逻辑，要求Model层改变数据状态，Model层再将新数据更新到View层。

 

 

缺点: View层和Model层相互持有，互相操作，可维护性有待提升。

MVP

Presenter管理层: 处理View层的事件，获取数据并将获取的数据经过处理后更新View。

思路: View层触发的事件传递到Presenter层中处理，Presenter层去操作Model层，并且将数据返回给View层，这个过程中，View层和Model层没有直接联系。

 

缺点: Presenter层需要调用View层的方法更新视图，无法自动更新视图。

MVVM

View-Model视图模型: 相比于MVP增加了双向绑定。

 

缺点: 双向绑定给调试和错误定位带来困难，View层的异常可能是View或者Model层的问题。

常用指令

• v-model: 一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
• v-html: 更新元素的 innerHTML
• v-show、v-if: 条件渲染,使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成。v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏
• v-on:click(@click): 绑定一个事件。如果事件触发了，就可以指定事件的处理函数
• v-for: 基于源数据多次渲染元素或模板块
• v-bind: v-bind:title="msg"可简写为:title="msg"。当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

vue生命周期

vue生命周期总共分为8个阶段: 创建前/后，载入前/后，更新前/后，销毁前/后。

• beforeCreate（创建前）vue实例的挂载元素$el和数据对象 data都是undefined, 还未初始化。
• created (创建后) 完成了 data数据初始化, el还未初始化。
• beforeMount (载入前) vue实例的$el和data都初始化了, 相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
• mounted (载入后) 在el 被新创建的 vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
• beforeUpdate (更新前) 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
• updated （更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
• beforeDestroy (销毁前） 在实例销毁之前调用。实例仍然完全可用。
• destroyed (销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

双向数据绑定原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty() 来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

vue-router导航守卫

全局守卫

vue-router全局有三个守卫：

• router.beforeEach：全局前置守卫，进入路由之前
• router.beforeResolve：全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
• router.afterEach：全局后置钩子，进入路由之后

使用方法:

// main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => { 
  next();
});
router.beforeResolve((to, from, next) => {
  next();
});
router.afterEach((to, from) => {
  console.log('afterEach 全局后置钩子');
});

路由独享守卫

如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { 
        // 调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
        // ...
      }
    }
  ]
})

路由组件内的守卫

• beforeRouteEnter：进入路由前, 在路由独享守卫后调用不能获取组件实例 this，组件实例还没被创建
• beforeRouteUpdate：路由复用同一个组件时, 在当前路由改变，但是该组件被复用时调用可以访问组件实例this
• beforeRouteLeave：离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例this