最近在看深入浅出VUE.JS，了解到vue的双向工作原理。这里记录一下。
这个方法主要功能：直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法: Object.defineProperty(obj, prop, descriptor)
//obj: 需要被操作的目标对象
//prop: 目标对象需要定义或修改的属性的名称
//descriptor: 将被定义或修改的属性的描述符
//简单示例
var obj = new Object();
Object.defineProperty(obj, 'name', {
configurable: false,
writable: true,
enumerable: true,
value: '张三'
})
console.log(obj.name) //张三几个参数：
writable：属性的值是否可以被重写。设置为true可以被重写；设置为false，不能被重写。默认为false
Enumerable：此属性是否可以被枚举（使用for…in或Object.keys()）。设置为true可以被枚举；设置为false，不能被枚举。默认为false。
configurable：
是否可以删除目标属性或是否可以再次修改属性的特性（writable, configurable, enumerable）。设置为true可以被删除或可以重新设置特性；设置为false，不能被可以被删除或不可以重新设置特性。默认为false。
这个属性起到两个作用：
1·目标属性是否可以使用delete删除
2·目标属性是否可以再次设置特性
还有最重要的getter和seeter
getter/setter
当设置或获取对象的某个属性的值的时候，可以提供getter/setter方法。
- getter 是一种获得属性值的方法
- setter是一种设置属性值的方法。
在特性中使用get/set属性来定义对应的方法。
简单的数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<title>双向绑定</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div>
</body>
<script>
var obj={}
Object.defineProperty(obj,'txt',{
get:function(){
return obj
},
set:function(newValue){
document.getElementById('txt').value = newValue
document.getElementById('show-txt').innerHTML = newValue
}
})
document.addEventListener('keyup',function(e){
obj.txt = e.target.value
})
</script>
</html>
其实上面的代码有个坑，会造成txt属性无线循环
//改进代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>双向绑定</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div>
</body>
<script>
var obj={}
Object.defineProperty(obj,'txt',{
get:function(){
return txt //这里是造成无限循环的主要代码
},
set:function(newValue){
this.obj = newValue
document.getElementById('show-txt').innerHTML = newValue
}
})
document.addEventListener('keyup',function(e){
obj.txt = e.target.value
console.log(obj)
})
</script>
</html>
Comments | NOTHING