Vue源码分析-数据代理

最新推荐文章于 2022-07-29 21:27:57 发布

搬运Gong

最新推荐文章于 2022-07-29 21:27:57 发布

阅读量179

点赞数

分类专栏： Vue 文章标签： vue 数据代理

本文链接：https://blog.csdn.net/qq_20315217/article/details/116349830

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

vue 的数据代理是如何实现的？通过本文的学习，让我们来一探究竟！！

数据代理(MVVM.js)

含义

1.通过一个对象代理对另一个对象中属性的操作(读/写)
2.通过vm对象来代理data对象中所有属性的操作
3.好处: 更方便的操作data中的数据
4.基本实现流程
	1). 通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符
	2). 所有添加的属性都包含getter/setter
	3). 在getter/setter内部去操作data中对应的属性数据

这里推荐 github 上面的一个仓库，来进行分析：https://github.com/DMQ/mvvm 感兴趣的小伙伴可以去看一下。

Vue中的数据代理

首先先来写个例子看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue源码分析之数据代理</title>
</head>
<body>

<div id="test"></div>
<!--  引入 vue.js -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: "#test",
    data: {
      name: '小明'
    }
  })
	// 读取的是data中的name,  vm代理对data的读操作
  console.log(vm.name)  
	// 数据保存到data中的name上, vm代理对data的写操作
  vm.name = '小刚' 
  console.log(vm.name, vm._data.name)

</script>
</body>
</html>

在控制台可以看到的效果：
在这里插入图片描述

自定义实现数据代理

接下来，我们不使用 vue.js 来实现代理数据代理效果。
把上面 github 项目中的 js 文件引入到工程中，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue源码分析之数据代理</title>
</head>
<body>
<div id="test"></div>
<!-- 下面这几个文件，就是仿照 vue.js 来实现的，用来学习使用 -->
<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 type="text/javascript">
  const vm = new MVVM({
    el: "#test",
    data: {
      name: 'xiaoming2'
    }
  })
  console.log(vm.name)  // 读取的是data中的name,  vm代理对data的读操作
  vm.name = 'xiaogang2' // 数据保存到data中的name上, vm代理对data的写操作
  console.log(vm.name, vm._data.name)


</script>
</body>
</html>

可以看到效果和 vue.js 是一样的，同样完成了数据代理。
在这里插入图片描述

那么具体是怎么实现的呢？来看一下，首先入口肯定是从 new MVVM()来入手，我们进去看一下都做了什么：
mvvm.js

/*
相当于Vue的构造函数
 */
function MVVM(options) {
  // 将选项对象保存到vm
  this.$options = options;
  // 将data对象保存到vm和data变量中
  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;
      }
    });
  }
};

可以看到，最终实现数据代理是通过Object.defineProperty来完成的，对所有的属性进行了定义，并且不可以重新定义。

这里有一个重要的知识点就是Object.defineProperty，具体可以参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

搬运Gong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
Vue源码分析-数据代理

vue 的数据代理是如何实现的？通过本文的学习，让我们来一探究竟！！数据代理(MVVM.js)含义1.通过一个对象代理对另一个对象中属性的操作(读/写)2.通过vm对象来代理data对象中所有属性的操作3.好处: 更方便的操作data中的数据4.基本实现流程 1). 通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符 2). 所有添加的属性都包含getter/setter 3). 在getter/setter内部去操作data中对应的属性数据
复制链接

扫一扫