Vue三个模式

vue基础整理

个人笔记勿踩

vue特点与MVVM模式

特点：

• 渐进式

vue是渐进式JavaScript框架，用到什么功能，只需要引入什么功能的模块。

• 如果只是简单的将数据与视图进行关联渲染，只需要引入vue即可实现声明式渲染

<div id="app">
  {{message}}
</div>
//vue实例
var app = new Vue({
     el:"#app", //挂载点（让vue管理的区域）
     data:{  //让vue进行管理的数据
       message:"hello  word"
     }
})

最后的结果就是页面上会显示“hello word”这个单词

• 如果后续多个地方用到相同的效果，那么我们就可以借助vue的组件化思想进行封装，在用到的地方直接调用该组件即可（可以参考卖座项目中封装tabbar.vue组件）
• 如果要做前端的SPA单页路由，需要引入第三方vue-router实现路由功能通过cnpm i vue-router -S安装插件，然后引入vue-router

import Vue from "vue"
import router from "vue-router"
//必须通过Vue.use方法来注册引入的插件
Vue.use(router)

• 如果涉及多组件之间的状态管理维护，需要引入第三方插件vuex实现状态管控,[vuex](https://vuex.vuejs.org/zh/installation.html)安装

npm install vuex --save
or
yarn add vuex

• 如果项目最终上线、团队开发等需要引入webpack等构建工具进行羡慕打包、构建、迭代操作

• 主张弱

• 好处

易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）

模式

一共有这几种模式

mvc:

mvc模式中字母分别代表着m(模型层)、v(视图层)、c(管理层)
当用户对视图层做出操作后，视图层捕获到这个操作，然后把权力交给管理层去进行预处理，从而决定调用哪个模型层去执行相关的业务逻辑，最后视图层观察到模型层变更了后，去重新更新界面
但是这个模式有个问题就是这三者是之间都有关联，但是model发生变化后被view通过观察者模式监控到，从而渲染新的视图，这也就导致了view强依赖与特定的mode层

mvp：

和MVC模式一样，只不过这里的controller改名为了presenter，而且视图层与模型层之间没有了联系，但是presenter与这两个层级之间的通信都是双向的，那么这就导致中间的presenter显得非常的臃肿，所有的逻辑都部署在这里面，同时view里面不部署任何的业务逻辑。而view又由于view和model之间没有直接的关联，就导致后期model->view的手动同步逻辑麻烦，维护困难

mvvm：Model View ViewModel

MVVM的调用关系和MVP一样。但是，在ViewModel当中会有一个叫Binder。只需要在view的模板语法中，指令式地声明view上的显示的内容和model的哪一块数据进行绑定即可。当ViewModel对Model进行更新的时候，Binder会自动把数据更新到View上去；当用户对View进行操作，Binder也会自动把数据更新到Model上去。这种方式也称为：双向数据绑定。

面试题

1.为什么在vue中当model层发生改变了，viewmodel如何知道m层发生改变了？
2.那么双向数据绑定的原理是什么?

1.vue在创建viewmodel的时候，会将数据配置到vue实例中，然后内部通过Object.defineProperty方法，为数据动态的添加get/set方法，当获取数据的时候，会触发相对应的get方法。当设置数据的时候，会触发set方法，当set方法触发完成的时候，会进行进一步的watcher触发，数据改变完成了，视图也会进行重新渲染操作。

2.vue通过数据劫持&发布订阅模式实现数据的双向绑定。通过Object.defineProperty方法对所有的数据进行数据劫持，就是给这些数据动态的添加了getter与setter方法。在数据变化的时候发布消息给订阅者（watcher），触发响应的监听回调