原理分析:
vue利用了Object.defineProperty()
这个方法,重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="main">
<input id="input" type="text">
<div id="txt"></div>
<button id="btn">按钮</button>
</div>
</body>
<script>
let input = document.querySelector("#input")
let txt = document.querySelector("#txt")
let btn = document.querySelector("#btn")
let user = {
name: "沉末"
}
let userName = user['name']
input.value = userName
txt.textContent = userName
Object.defineProperty(user,'name',{
get:function(el){
console.log("get:"+userName)
//获取值的时候触发
return userName //这里不能直接用user.name,执行.又会进入defineProperty
},
set:function(val){
//值改变的时候触发数据更新
input.value = val;
txt.textContent = val;
userName = val
}
})
//监听输入
input.addEventListener('input',function(e){
user.name = this.value //进入set
})
//监听点击
btn.addEventListener('click',function(e){
console.log('click:'+user.name) //进入get
})
</script>
</html>