vue数据双向绑定的实现原理
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() 添加的属性值是不可修改的。
使用方法:
- 传参
-
第一个参数:要设置的目标对象(必填)
-
第二个参数:要定义或修改的属性的名称。(必填)
-
第三个参数:目标对象的属性所拥有的方法或属性值。(descriptor)(必填)
三个参数都是必填项,重点介绍第三个参数 descriptor
- descriptor
-
value:目标属性的值
-
writable:false表示只读,且默认是false
-
configurable:当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。以及除value和writable特性外的其他特性是否可以被修改。
-
enumerable:是否可枚举(是否能在for…in循环中遍历出来或在Object.keys中列举出来),默认是false
-
get: 一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。
默认为 undefined。 -
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