数据代理

最新推荐文章于 2023-06-13 19:26:29 发布

guokanglun

最新推荐文章于 2023-06-13 19:26:29 发布

阅读量2.1k

点赞数 7

分类专栏： Vue

本文链接：https://blog.csdn.net/gklcsdn/article/details/110390316

版权

Vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

文章目录

- - - - 1. 数据代理
      - 2. 基实现流程

1. 数据代理

通过一个对象代理另一个对象中的属性的操作（读 / 写）

vue 数据代理：通过vm对象来代理data中所有属性的操作，更方便操作data中的数据

对应案例：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
<div id="app">

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.7/vue.min.js"></script>
<script>
	const vm = new Vue({
		el:'#app',
		data:{
			username: 'doudou'
		}
	});
	// vm 代理data
	console.log(vm.username);  // doudou
</script>
</body>
</html>

源码解析：

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

2. 基实现流程

（1）通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符
（2）所有添加的属性都包含 getter/setter
（3） getter/setter 内部去操作 data 中对应的属性数据

guokanglun

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
数据代理

文章目录1. 数据代理1. 数据代理通过一个对象代理另一个对象中的属性的操作（读 / 写）vue 数据代理：通过vm对象来代理data中所有属性的操作function MVVM(options) { // 将选项对象保存到vm this.$options = options; // 将data对象保存到vm和data变量中 var data = this._data = this.$options.data; //将vm保存在me变量中 var
复制链接

扫一扫