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

一、数据代理的分析

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

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

数据代理的关键过程：

// 对指定属性实现代理的方法
  _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;
      }
    });
  }

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

 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}

二、数据代理的实现：

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;
      }
    });
  }
};

数据代理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>

关于vue的源码分析，我在github上建立了一个项目，项目地址如下https://github.com/jiuchengTk279/vueSourceCode.git，欢迎大家访问下载，也希望可以多给予一些建议交流。

旧城tk

发布了146 篇原创文章 · 获赞 34 · 访问量 3万+

私信关注

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

一、数据代理的分析

二、数据代理的实现：

猜你喜欢