阅读 109

记录下Object.defineProperty

vue2说到双向绑定就不得不说Object.defineProperty()

MDN文档

1、什么是Object.defineProperty

官方说法:方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

个人理解:对某个对象属性的修改或者增加,可以通过内部的getset进行对数据的劫持。类似axios的拦截器。

2、用法

Object.defineProperty(obj, prop, descriptor)

  • obj 要定义属性的对象
  • prop 要定义或修改的属性的名称
  • descriptor 是个对象,里面参数有各种方法

介绍descriptor内属性描述

1、configurable,true: 可以配置对象,删除属性

2、enumerable, true: 可以枚举,枚举就是遍历

3、value 属性的值

4、writable true: descriptor外部可以改变属性value的值
false:外部不可改变

5、get 获取值

6、set 设置值

注意点:get set 不能与value,writable一起使用。互斥。

代码

  • writable添加属性
    let o = {}
    Object.defineProperty(o, "a", {
        value : 37,
        writable : true,
        enumerable : true,//遍历
        configurable : true
    })
    console.log(o.a) //输出37
复制代码
  • 利用get set添加属性
let b = 38
    Object.defineProperty(o, "b", {
        enumerable : true,
        configurable : true,
        get() { //o.b就会访问get方法
            return b
        },
        set(v) {
            b = v
        }
    })
    console.log(75, o.b)//38
复制代码

3、实现个简单的双向绑定

<input type="text" value="222">
<span></span>
复制代码
    /**
     * 简单双向绑定
     */
    let obj = {}

    Object.defineProperty(obj, 'text',{
        get(){
            console.log('get val')
        },
        set(v) {
            console.log('set val',v)
            document.querySelector('span').innerHTML = v
        }
    })
    
    const inputDom = document.querySelector('input')
    inputDom.addEventListener('input',(e)=>{
        obj.text = e.target.value
    })
复制代码

PS:难的我写不了,请看 vue双向绑定原理

关注下面的标签,发现更多相似文章
评论