欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue数据双向绑定的实现原理

程序员文章站 2022-04-18 23:17:46
...
Object.defineProperty?
        var model={};       
        Object.defineProperty(model,'txt',{
           value:"hello world!"
        });
        console.log(model.txt);//hello word!

defineproperty是es5的特性,该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的,能够在属性枚举期间呈现出来(for…in 或 Object.keys 方法), 这些属性的值可以被改变,也可以被删除。这个方法允许修改默认的额外选项(或配置)。默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改的。
使用方法:

  • 传参
  1. 第一个参数:要设置的目标对象(必填)

  2. 第二个参数:要定义或修改的属性的名称。(必填)

  3. 第三个参数:目标对象的属性所拥有的方法或属性值。(descriptor)(必填)

    三个参数都是必填项,重点介绍第三个参数 descriptor

  • descriptor
  1. value:目标属性的值

  2. writable:false表示只读,且默认是false

  3. configurable:当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。以及除value和writable特性外的其他特性是否可以被修改。

  4. enumerable:是否可枚举(是否能在for…in循环中遍历出来或在Object.keys中列举出来),默认是false

  5. get: 一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。
    默认为 undefined。

  6. set:一个给属性提供 setter 加粗样式的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。
    默认为 undefined。
    在 get 和 set 方法中,this 指向某个被访问和修改属性的对象。

  • 创建属性节
    如果对象中不存在指定的属性,Object.defineProperty()就创建这个属性。当描述符中省略某些字段时,这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是false。value,get和set字段的默认值为undefined。一个没有get/set/value/writable定义的属性被称为“通用的”,并被“键入”为一个数据描述符。
    用直接赋值的方式创建对象的属性,则这个属性的enumerable为true
  • 继承属性节
    如果访问者的属性是被继承的,它的 get 和set 方法会在子对象的属性被访问或者修改时被调用。如果这些方法用一个变量存值,该值会被所有对象共享。
    推荐学习网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty