Vue中的数据劫持

　　　　　　　let obj = {
                name: ‘小明‘,
                age: 21
            }
            function fun(obj,name){
                let value = obj[name]
                Object.defineProperty(obj,‘name‘,{
                    //get 方法就是每次获取这个属性的值时，执行的方法
                    get(){
                        console.log(‘我是 get 中的‘)
                        return  ‘我是 get 获取的‘ + value
                    },
                    //set 方法就是每次设置这个属性的值时，执行的方法
                    set(newVal){ //newVal是给当前的值从新赋值的值，也就是新值
                        console.log(‘我是 set 中的‘)
                        value = ‘，我是 set 设置的‘ + newVal
                    }
                })
            }
            fun(obj,‘name‘)
            console.log(obj.name) //打印两次 1、我是 get 中的  2、我是 get 获取的小明
            obj.name = ‘小红‘ //打印一次 1、我是 set 中的
            console.log(obj.name) //打印两次 1、我是 get 中的  2、我是 get 获取的，我是 set 设置的小红

/**
 * 数据劫持
 */
class Observer{
    constructor(data) {
        this.observer(data);
    }
    observer(data){
        //如果是对象才观察
        if(data && typeof data === ‘object‘){
            
            for (let key in data) { //循环 data 中的所有子项
                this.defineReactive(data,key,data[key]);
            }
        }
    }
    //实现数据劫持
    defineReactive(obj,key,value){
        this.observer(value); //如果传进来的参数是对象,就回调一下这个函数,就是一个递归函数
        
        let dep = new Dep(); //给每一个属性都添加一个具有发布和订阅的功能
        
        Object.defineProperty(obj,key,{
            get(){
                //创建watcher时,会获取到对应的内容 并且把watcher放到了全局上
                Dep.target && dep.addSub(Dep.target);
                return value;
            },
            set: (newVal)=>{
                if(value !== newVal){
                    this.observer(newVal); //给设置的新值也加上 get set 方法
                    value = newVal;
                    dep.notify(); //执行观察者更新时的函数
                }
                
            }
        })
    }
}