1、Vue.js和MVVM

一、什么是Vue.js？

• 前端三大主流框架
  Angular.js、React.js、Vue.js
• 简单小巧
  使用gzip压缩后，只有20kb左右
  入门容易
• 自动进行响应式更新
  只需要关注前端业务逻辑，无需操作DOM
• 高级特性
  解耦视图与数据
  可复用组件
  前端路由
  状态管理
  虚拟DOM

二、MVVM模式

• MVVM是Model-View-ViewModel的缩写
  Model：数据；和数据库进行数据交互
  View：视图；界面展示
  ViewModel：视图模型

三、MVVM和Vue.js

• MVVM
  它是Model-View-View Model的所写，是一种基于前端开发的架构模式。其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动你传递给View，即是所谓的“数据双向绑定”

• Vue.js
  是一个提供了MVVM风格的双向数据绑定的JavaScript库，其专注于View层，它的核心是MVVM中的VM/ViewModel。

• M、V、VM的关系
  ViewModel负责连接View和Model，这两层之间没有直接的联系，而是通过ViewModel进行交互。它们之间的交互是双向的：其中一个的状态发生改变，会导致另外一层对应的装填发生改变，从而保证了视图和数据的一致性

• 这种轻量级的架构让前端开发更加便捷和高效，因为ViewModel通过双向数据把View层和Model层连接起来，而View和Model之间的数据同步工作是自动的，无需开发者去干涉，这样开发者只需要关注处理业务逻辑，不需要手动去操作DOM（View），不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理

• MVVM在前端代码的体现： 摘自知乎文章https://zhuanlan.zhihu.com/p/33178071

• Vue实现双向数据绑定的原理（摘自知乎文章https://zhuanlan.zhihu.com/p/33178071）
  vue中实现双向数据绑定用到的核心方法就是defineProperty，这个方法在对象的原型上，使用方法如下：

// Object.defineProperty是用来操作一个对象的它有两种用法
//（1）、
    var obj={name:"小孩"};
    Object.defineProperty(obj,'sex',{
        configurable:true,//此属性是否可以删除（delete）,默认是false.
        enumerable:true,//是否可以枚举例如通过for in，默认是false
        writable:true,//此属性是否可以改，默认是false
        value:"man",
    });
//通过（1），我们给obj这个对象添加了一个'sex'属性，通过以上的配置，这个属性可以删除、
//可以枚举、可以修改，

//（2）、配置项中的writable属性由两个方法（get、set）代替，此时这个属性时可修改的。
//writable和这两个方法不能同时出现在配置项
  Object.defineProperty(obj,'sex',{
        configurable:true,//此属性是否可以删除（delete）,默认是false
        enumerable:true,//是否可以枚举例如通过for in，默认是false
        get(){//当获取obj.sex值得时候会调用执行get方法，获取的值就是这个函数的返回值
            console.log("你调用了get方法") 
            return 'man';
        },
        set(newVal){//当给这个属性赋值的时候会调用执行set方法,即使所赋的值和原值相同也会调用
            console.log('你修改了obj的sex属性，调用了set方法');
            console.log(newVal);//此时val就是赋予obj的sex属性的新值
        }
    });
obj.sex="woman";//你修改了obj的sex属性，调用了set方法  woman
console.log(obj.sex);//你调用了get方法   woman
//可以复制代码进行验证，从而加深印象。