学习笔记1-Vue的MVVM 架构分析

目录

• • 一、MVC模式及与衍生的 MVP 和 MVVM 架构的区别
  • • 1、概念
    • 2、各部分之间的通信方式
    • • MVC
      • 衍生--MVP
      • 衍生--MVVM
  • 二、Vue 的 MVVM 简单分析

一、MVC模式及与衍生的 MVP 和 MVVM 架构的区别

阮一峰博客文章

1、概念

视图（View）：用户界面。

控制器（Controller）：业务逻辑

模型（Model）：数据保存

2、各部分之间的通信方式

MVC

1. 单向

   

衍生–MVP

1. 双向
2. 逻辑都部署在Presenter

   

衍生–MVVM

1. 双向绑定（data-binding）：View的变动，自动反映在 ViewModel
2. Presenter 改为 ViewModel

   

二、Vue 的 MVVM 简单分析

• 通过script标签对引入Vue.js之后，我们会得到一个全局变量 Vue
• 查看Vue源代码发现：
  • 是通过匿名函数封装的
  • 匿名函数的格式（ function ( arg1,arg2) {} ）( a,b )
  • 源代码封装的大致原理

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  (function ( global,factory) {  // 形参
        global.Vue = factory   // 可看出变量Vue是直接挂在window上的。factory函数对应的对应下面的function回调函数
    })( this, function ( options ) {  //实参： 参1：this指向全局； 参2：回调函数，返回值：返回的构造函数Vue；回调函数参数为接收的对象options
        function Vue ( options ) {   //构造函数。参数为对象options，上面接收。
            this.name = options.name
            this._init()
        }
        function _init () {
            Vue.prototype.age = 18
            Vue.prototype.id = 10
        }
        return  Vue
    })
           

var vm = new Vue({  //实例化
        name: '1907'
    })
    console.log( vm )
           

综上，我们写一个简单的 hello Vue 案例，分析Vue里，这里谁是M 谁是V 谁是VM。

<!-- V -->
    <div id="app">
        <p> {{ info }} </p>
    </div>
           

var VM = new Vue({
        el: '#app',
        data: {  // M
            info: 'Hello World'
        }
    })