记录一下代码！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue响应式原理</title>
</head>
<body>
<div id="app">
<button>按钮</button>
<h1 id="title"></h1>
</div>
<script type="text/javascript">
var title = document.getElementById('title');
var btn = document.querySelector("button");
var data = {
title: '我是标题',
con: '我是内容'
}
k(data)
title.innerHTML = data.title;
//劫持数据
function k(obj) {
Object.keys(obj).forEach(function(item){
defineReactive(obj,item,obj[item])
});
}
function defineReactive(obj,key,val){
Object.defineProperty(obj,key,{
set: function(newVal){
val = newVal
title.innerHTML = newVal;
},
get: function(){
return val
}
})
}
var i = 0;
btn.addEventListener("click",function(){
i++;
data.title += i;
console.log(data)
});
</script>
</body>
</html>