vue源码分析之数据代理过程

た入场券 2023-07-03 02:47 67阅读 0赞

#### 一、数据代理的分析 ####

1.  **数据代理**：通过一个对象代理另一个对象中的属性操作，包括读和写的操作。
2.  **vue的数据代理**： `data`对象的所有属性操作，读和写的操作都是通过`vm`对象代理来操作的。
3.  **好处**：通过`vm`对象就可以方便的操作`data`中的数据。
4.  **数据代理的实现过程**：

*  通过`Object.defineProperty(vm, key, {})` 给`vm`添加与`data`对象的属性对应的属性
 *  所有添加的属性都包括`get`和`set`方法
 *  在`get`和`set`方法中去操作`data`中对应的属性

1.  **数据代理的关键过程**：

// 对指定属性实现代理的方法
      _proxy: function (key) { 
        // 保存vm
        var me = this;
        // 给vm添加指定属性名的属性(使用属性描述)
        Object.defineProperty(me, key, { 
          configurable: false, // 不能再重新定义
          enumerable: true, // 可以枚举遍历
          // 当通过vm.name读取属性值时自动调用
          get: function proxyGetter() { 
            // 读取data中对应属性值返回(实现代理读操作)
            return me._data[key];
          },
          // 当通过vm.name = 'xxx'时自动调用
          set: function proxySetter(newVal) { 
            // 将最新的值保存到data中对应的属性上(实现代理写操作)
            me._data[key] = newVal;
          }
        });
      }

1.  在`vue`的实现过程中，是通过`new Vue`的实例，而在我们实现的过程是通过`new MVVM`的实例，创建构造函数，核心是通过`vm`代理数据操作，`vm.name`是代理数据读的操作，而`vm.name="李四"`，是可以代理对数据写的操作，通过`vm._data.name`就可以拿到值，代码如下：

#### 二、数据代理的实现： ####

1.  **MVVM.js**：

/* 相关于Vue的构造函数 */
    function MVVM(options) { 
      // 将选项对象保存到vm
      this.$options = options;
      // 将data对象保存到vm和datq变量中
      var data = this._data = this.$options.data;
      //将vm保存在me变量中
      var me = this;
      // 遍历data中所有属性
      Object.keys(data).forEach(function (key) {  // 属性名: name
        // 对指定属性实现代理
        me._proxy(key);
      });
    
      // 对data进行监视
      observe(data, this);
    
      // 创建一个用来编译模板的compile对象
      this.$compile = new Compile(options.el || document.body, this)
    }
    
    MVVM.prototype = { 
      $watch: function (key, cb, options) { 
        new Watcher(this, key, cb);
      },
    
      // 对指定属性实现代理的方法
      _proxy: function (key) { 
        // 保存vm
        var me = this;
        // 给vm添加指定属性名的属性(使用属性描述)
        Object.defineProperty(me, key, { 
          configurable: false, // 不能再重新定义
          enumerable: true, // 可以枚举遍历
          // 当通过vm.name读取属性值时自动调用
          get: function proxyGetter() { 
            // 读取data中对应属性值返回(实现代理读操作)
            return me._data[key];
          },
          // 当通过vm.name = 'xxx'时自动调用
          set: function proxySetter(newVal) { 
            // 将最新的值保存到data中对应的属性上(实现代理写操作)
            me._data[key] = newVal;
          }
        });
      }
    };

1.  **数据代理MVVM的实现**：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>数据代理的MVVM实现</title>
    </head>
    <body>
        <div id="test"></div>
    </body>
    <script type="text/javascript" src="./js/mvvm/compile.js"></script>
    <script type="text/javascript" src="./js/mvvm/mvvm.js"></script>
    <script type="text/javascript" src="./js/mvvm/observer.js"></script>
    <script type="text/javascript" src="./js/mvvm/watcher.js"></script>
    <script> const vm = new MVVM({ el: "test", data: { name: "张三" } }); // vm代理对数据读的操作 console.log(vm.name, vm); // 张三 MVVM {$options: {…}, _data: {…}, $compile: Compile} vm.name = "李四"; // vm代理对数据写的操作 console.log(vm._data.name, vm.name, vm); // 李四 李四 MVVM {$options: {…}, _data: {…}, $compile: Compile} </script>
    </html>