MVVM数据代理

Posted zzxuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MVVM数据代理相关的知识,希望对你有一定的参考价值。

MVVM数据代理

function MVVM(options) {
    this.$options = options || {};
    var data = this._data = this.$options.data;
    var me = this;

    // 数据代理
    // 实现 vm.xxx -> vm._data.xxx
    Object.keys(data).forEach(function(key) {
        me._proxyData(key);
    });

    this._initComputed();

    observe(data, this);

    this.$compile = new Compile(options.el || document.body, this)
}

MVVM.prototype = {
    $watch: function(key, cb, options) {
        new Watcher(this, key, cb);
    },

    _proxyData: function(key, setter, getter) {
        var me = this;
        setter = setter || 
        Object.defineProperty(me, key, {
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                return me._data[key];
            },
            set: function proxySetter(newVal) {
                me._data[key] = newVal;
            }
        });
    },

    _initComputed: function() {
        var me = this;
        var computed = this.$options.computed;
        if (typeof computed === ‘object‘) {
            Object.keys(computed).forEach(function(key) {
                Object.defineProperty(me, key, {
                    get: typeof computed[key] === ‘function‘ 
                            ? computed[key] 
                            : computed[key].get,
                    set: function() {}
                });
            });
        }
    }
};

 

以上是关于MVVM数据代理的主要内容,如果未能解决你的问题,请参考以下文章

Android MVVM在哪里存储数据?

Vue之MVVM数据代理

Vue 注意事项 模板语法 单双向绑定 语法格式 MVVM框架 Object.defineProperty和数据代理操作

Android 上的 Kotlin:如何在片段中使用数据库中的 LiveData?

MVVM源码解析之数据代理篇

MVVM源码解析之数据代理篇