美文网首页
vue响应式原理的简单了解(一)

vue响应式原理的简单了解(一)

作者: 如虎添 | 来源:发表于2019-10-31 18:55 被阅读0次

    知识点

    Object.defineProperty()

    Object.defineProperty是ES5提供的方法,可以给对象上的属性定义一些规则,也可也通过存取器属性(get、set)来达到一个“监听”的效果。

    Object.defineProperty(obj, prop, desc)
    

    1.obj 需要定义属性的当前对象
    2.prop 需要定义的属性
    3.desc 关于要定义属性的规则集(属性描述符),常用描述符如下:

    • configurable:可配置行,设置该属性是否可以删除,或修改该属性的特性,能否把属性改为构造器。默认值true
    • enumerable:可枚举性,设置该属性能否通过for-in遍历得到属性。默认值为true。
    • writable:可写性,表示能否修改属性的值。默认值为true。
    • value:数据属性,表示属性的值。默认值为undefined。

    除了上面的属性,还有两个存取器属性,分别是get和set,可以代替value和writable。

    • get:在读取属性时调用的函数。只指定get则表示属性为只读属性。默认值为undefined。

    • set:在写入属性时调用的函数。只指定set则表示属性为只写属性。默认值为undefined。

    let data = {}
    Object.defineProperty(data , "name", {
       get:()=>{
           console.log("在读取该属性时调用此方法")
        },
       set:(value)=>{
           console.log("在设置该属性时调用此方法")
            this.name = value  //不写赋值语句,则该属性无法被设置
        },
    })
    data.name = 1  // 在设置该属性时调用此方法
    
    

    相关文章

      网友评论

          本文标题:vue响应式原理的简单了解(一)

          本文链接:https://www.haomeiwen.com/subject/yivtbctx.html