vue源码学习——数据双向绑定的Object.defineProperty

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/titoni_yunruohan/article/details/83587045

情景：vue双向绑定，这应该是多数讲vue优势脱口而出的名词，然后你就会接触到一个方法

Object.defineProperty(a,"b",{})

• 这个方法该怎么用

1. 简单例子敲一下

var a = {}
Object.defineProperty(a,"b",{
    value:123
})
console.log(a.b)

    2.参数怎么传，分别表示什么意思

• 第一个参数a： 下手的目标对象
• 第二个参数b： 为下手的对象定义的一个属性或是方法的名字
• 第三个参数{}:    为刚定义的属性或方法定义的操作

    3.重点参数的讲解

• value： 为新定义的属性附值
• writeable： 如果是false，属性的值就不能被重写，只能为只读了
• configurable： 如果设置为false，value，writeable只能保持现状
• enumerable：是否能在for...in循环遍历出来或在Oject.keys中列举出来
• set：是获取value的方法（与value和writeable不可共用）
• get：是设置value的方法（与value和writeable不可共用）

相信通过上面的解释，前四个参数的值应该不需要再来解释

• set和get如何使用

1. 先来看一下简单事例

var person = {
    name:"madongmei",
 }
 var a = 13
 Object.defineProperty(person,"age",{
     get:function(){
         return  "sundongmei"
     },
     set:function(value){
         person.name = value
     }
 })
 person.age = 17;
//此时set方法被调用，17作为参数传入
 console.log(person.name) //17
 console.log(person.age) //sundongmei
//此时get方法被调用，返回的即是age属性的值
    

     2.具体解释

• get 当获取值的时候触发的函数

      可以将其理解为value：17   暂时没有发现get的重要性

• set 当设置值的时候触发的函数，设置的新值通过参数value拿到

      可以理解为新定义属性时的连带操作，暂时尝试不能使用新定义的属性