vue-数据代理

学习数据代理我们一定要对Object.defineProperty这个函数特别的清楚。它传几个参数（对象的名称，所要加的属性名称，{属性的配置项如：value}）

这个方法在vue中的体现，数据劫持，数据代理，计算属性等

//Object.defineProperty的运用
 <script>
        let person={
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18
        })
        console.log(person)
    </script>

结果为

在这里我们可以思考一下为什么我们用定义属性这个方法给person加一个属性时，它在控制台上打印出来的颜色不一样呢？其实这是因为我们用此方法给他加的属性不可以枚举，就是不参与遍历。具体可以用forEach遍历，也可以使用Object.key（）这个方法，（此方法时把对象上所有的属性的名称遍历形成一个数组），你会发现person上没有age这个属性。那如果你非要让person这个对象上要后面添加一个属性，还能枚举。我们可以在

Object.defineProperty(person,'age',{
            value:18，
             enumerble:ture   //是否可以被枚举，默认false
             writable:ture    //表示可以被修改的
             configuarable:ture   //表示是否可以被删除
        })

那具体这两个有什么区别呢：这是很重要的后面Object.defineProperty（）这个方法因为你如果在对象里面直接给一个age  那么这个属性后期你是改不掉的。但我们用Object.defineProperty（）你可以动态的改变age这个属性的值  在配置项里配置writable：ture，还有配置属性可以被删除 所以为什么vue底层用这一个方法，还有它里面的get  set方法的使用特别重要。

get的作用：就是但有人读取了person里面的age属性时，get函数就会被调用。且返回值就是

 age改变的值。怎么理解这句话呢？看下面图片，我们根据下面的js代码运行看到如下结果打印出来的person里面只有name  sex两个属性，没有看到age属性。但其实它是有age属性的，我们需要展开来看发现age有这个属性，但我们又神奇的发现age属性的值是三个点。只有我们点击了三个点才会显示具体的值，就好像告诉我们，person是有这个值，但你想要知道是多少你得具体展开。其实我们可以观察发现 vue的数据代理就是运用了这个特点，只要是vue代理的属性你会惊奇的发现 属性会有get 与set  并且属性值都是以三个点的形式。       

 set的作用：就是但有人修改了person里面的age属性时，get函数就会被调用。且会收到修改后的具体值

 <script>
        //对get方法进行演示，需求如果我在age里面改了数字，我要时让person里面能改变
        //我们不能直接number：number这样person里面的确时接收到了number  但是我们却不能动态的改变
        //person里面的值。我们要借助get来进行监测
        let number=18  
        let person={
            name:'张三',
            sex:'男',

        }
        Object.defineProperty(person,'age',{
            // value:18
            //get的作用就是但有人读取了person里面的age属性时，get函数就会被调用。且返回值就是
            //age改变的值
            get:function(){
                return number
            }
              set:function(vaule){
                return number=vaule
            }
        })
        console.log(person)
    </script>

 

 

 

 

 再回到最初为什么我们要用Object.defineProperty因为我们可以动态的操作数据，比如我们给number=18 但是后面我们要通过person读取或者修改number我们直接写死是不可以的。要通过Object.defineProperty就可以动态的操作用person动态的造作number里面的数据了，看下图