提到vue，总是要提到双向数据绑定、总是要提到双向数据绑定、总是要提到双向数据绑定……既然知道是用Object.defineProperty，那也自己来搞一个像v-model那样的双向数据绑定吧。废话不多说，直接上代码。
<input type="text" id="inputing">
<p id="result"></p>
let obj = {};
let data='default';
//第一个参数：定义属性的对象。
//第二个参数：要定义或修改的属性的名称。
//第三个参数：将被定义或修改的属性描述符。
Object.defineProperty(obj, "data", {
//获取值
get: function () {
console.log('调用了一次get');
return data;
},
//设置值
set: function (val) {
data = val;
console.log(val);
document.getElementById('result').innerHTML=val;
}
})
// 获取值调用get
document.getElementById('result').innerHTML = obj.data;
//赋值调用set
let flag = true;
document.getElementById("inputing").addEventListener('keyup',function(){
if(flag) obj.data = this.value;
})
// 中文输入法下，仅在选词后触发input事件
document.getElementById("inputing").addEventListener('compositionstart', function(e) {
flag = false;
});
document.getElementById("inputing").addEventListener('compositionend', function(e) {
flag = true;
});
因为在下面就调用了值，所以一开始input里面还没有输入的时候，下面也会显示默认值：
在input里输入后，下面的数据也随之变化：
一个神奇的……参数？变量？
改代码的时候发现，我没有定义一个变量name我的代码中也不见name这个字眼，然而在Object.defineProperty的getter和setter，却可以直接使用这样的一个参数。
为了探索name到底时何方神圣，我把name改成了nam、value，均报了错。
name到底从何而来？打印arguments和this，发现都没有name，而console.log(name)打印出来的，是我刷新浏览器之前的上一次最后的输入文本，代码如下：
Object.defineProperty(obj, "data", {
//获取值
get: function () {
console.log(arguments);
console.log(this);
console.log(name);
return data;
},
//设置值
set: function (val) {
console.log(arguments);
data = val;
name = val; // 当然此处需要设置了name下一次刷新浏览器才会有不同的结果
console.log(val);
document.getElementById('result').innerHTML=val;
}
})
初始没有输入也没有历史输入时，打印出的name为空
输入又刷新后，打印的name为上一次最后的文本
查阅官方关于Object.defineProperty()的描述，也没有发现这个神奇的name。不知道是我搜索方式不对还是关键词不对，也没发现有人遇到过这个问题，我的小脑袋真是充满了❓❓❓不知道哪位大神路过此地，能给我解个惑。
