前端框架 MVVM 实现原理之—— 数据劫持

由于 aos 系统使用了Vue 框架开发。想深入了解Vue 框架的 MVVM 的实现原理，在此记录自己学习到的东西。

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


从上图可以看出, 在 Vue2.x 中 MVVM 是采用数据劫持并结合发布订阅模式来实现数据绑定的。

1. 数据劫持
    访问或者修改对象的某个属性，除了执行基本的数据获取和修改操作以外，还基于数据的操作行为，以数据为基础去执行额外的操作；当前最经典的数据劫持应用就是数据渲染。
    1.1 现实方式一：使用 Object.defineProperty 的 setter 和 getter 操作，在数据变动时做你想要做的事情
    代码如下：

// 定义数据对象
let data = {}
// 初始值
let initValue = 'hello vue';
Object.defineProperty(data, 'newKey', {
        get: function () {
            console.log('执行了get方法');
            return initValue
        },
        set: function (value) {
            console.log('执行了set方法');
            initValue = value
        }
})
console.log(data.newKey). //输出值 hello vue
data.newKey = "AAA"    
console.log(data.newKey) ​//输出值 AAA

   执行结果如下：

1.2 实现方式二：数据代理 Proxy(target, handler)
  Proxy 构造函数中有两个参数：target 是用 Proxy 包装的被代理对象，handler 是一个对象，其声明了代理 target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数

  代码如下：

// 初始化 data 对象
const data = {
     user:{
         name:'jack',
         age:26
     },
     list:[1,4,3,2]
 }
// 占位符对象
 const handler = {
     get: function(target, key) {
         if (target[key] > 25) {
             console.log("年龄超过25，老大徒伤悲");
             return 1;
         } else {
             console.log("少壮不努力");
             return 3;
         }
     }
 };
// 占位符对象
 const handler2 = {
     get: function(target, key) {
         console.log("读到的下标", key);
         return target[key];
     }
 };
 // 读取对象
 const p = new Proxy(data.user, handler);
 const value = p.age; // 此操作触发get
 console.log(value);
 //读取数组
 const p2 = new Proxy(data.list, handler2);
 const value2 = p2[0] // 此操作触发get
 console.log(value2)

运行结果：

Proxy 让 JS 开发者很方便的使用代理模式，使函数更加强大，业务逻辑更加清楚。Proxy 不但可以取代 Object.defineProperty 并且还扩增了非常多的功能。Proxy 技术支持监测数组的 push 等方法操作，支持对象属性的动态添加和删除，极大的简化了响应化的代码量。Vue 3.0 的也会使用 Proxy 去实现部分核心代码

参考的网址：
https://www.jianshu.com/p/7dcb75bf87ba
https://segmentfault.com/a/1190000019198822
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy