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

情景: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拿到

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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值