js基础学习之旅之我对Object.defineProperty的理解

之前对Object.defineProperty一直半解最近系统性的恶补了一下Object相关的一些基础知识对于这个对象方法又多了一些了解所以再次记录一下加深记忆吧

Object.defineProperty这个方法在我的理解看来就是进行属性的拦截。
拦截了属性之后就可以对拦截的属性进行相关的操作，比如最重要的操作就是重新赋值

看到网上有很多文章都是直接拿一个对象去举例这样我觉得没有套用在实际的应用场景让人一知半解很不理解这个到底怎么用，所以我们今天就以vue响应式这里的对象拦截举例，在实际中记录一下感觉会好很多。

首先vue的2.*时代响应式主要是用的这个属性我们就简单实现一下对象代理。
我们很多人都搞不懂，为什么在vue中，直接可以访问到我们定义的data

let vue= new Vue({
    el: '#box',
    data() {
        return {
            name: '小王',
            sex: '145',
            city:'北京'
        }
    }
})
console.log(vue.name);
//程序运行结果为 ->  小王

这里就是vue做的一个属性代理以下是简单实现

class MyVue {
    constructor(options) {
        this.$options = options;

        this.init()
    }

    init() {
        let data = this.$options.data;
        data = this._data = typeof data === "function" ? data.call(data) : data || {};

        let vm = this;
        for (var key in data) {
            vm.proxy(vm,'_data',key)
        }
    }
    proxy(vm,target,key) {
        Object.defineProperty(vm,key,{
            get() {

                return vm[target][key]
            },
            set(newVlue) {
                if(vm[target][key] !== newVlue){
                    vm[target][key] = newVlue
                }
                
            }
        }) 
    }
}


export default MyVue;

这一顿操作下来我们可以看到原本在data中的属性都被代理到了vue对象之下，所以我们可以直接用vue对象去调用他，这就是一个简单的使用