Vue双向绑定Object.defineproperty()
2018-12-17 本文已影响11人
索隆萨克
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 数据绑定实现模式</title>
</head>
<body>
<h3 id="title"></h3>
<button id="btn">click</button>
<script>
var title = document.getElementById('title')
var btn = document.getElementById('btn')
var data = {
title:'news'
}
title.innerHTML = data.title
// 数据劫持
observer(data)
function observer(obj){
Object.keys(obj).forEach((item)=>{
definedReactive(obj,item,obj[item])
})
}
function definedReactive(obj,key,value){
Object.defineProperty(obj,key,{
get(){
return value
},
set(newValue){
value = newValue
title.innerHTML = value
}
});
}
btn.onclick = ()=>{
data.title = 'hello world'
}
</script>
</body>
</html>
