深入理解和手写--vue的数据代理原理

概述

在vue中对数据的读操作和写操作都是通过代理到vm中实现的

1. 数据代理： 通过一个对象代理对另一个对象中的属性的操作(读/写)
2. vue数据代理： 通过vm 对象来代理data对象中所有属性的操作
3. 优点： 更方便的操作data数据

const vm = new MVVM({
    el: "#test",
    data: {
        name: "feifei"
    }
})
console.log(vm.name, vm); //feifei vm代理data数据的读操作
vm.name = "xiaoxiao"; //vm代理data数据的写操作
console.log(vm._data.name, vm.name);
/**
 * 一般开发者只需要调用 vm.name 进行访问和读写
*/

基本实现流程

代码实现数据代理 vm.text == vm._data.text

(function() {
    function Vue(options) {
        // 配置对象保存到vm
        this.$options = options || {};
        var data = this._data = this.$options.data;
        var me = this;
        //数据代理 vm.xxx => vm._data.xxx 不需要递归
        this.convertData(data);


    }

    Vue.prototype = {
        convertData: function(data) {
            var me = this;
            Object.keys(data).forEach(key => {
                me._proxyData(key);
            })
        },
        _proxyData: function(key) {
            var me = this;
            Object.defineProperty(me, key, {
                configurable: false,
                enumerable: true,
                // writable: true,
                get: function proxyGetter() {
                    return me._data[key];
                },
                set: function proxySetter(newVal) {
                    me._data[key] = newVal;
                }
            })
        }


    }
    return window.Vue = Vue;
})()