当前位置: 代码迷 >> 综合 >> vue响应式原理,Object.defineProperty
  详细解决方案

vue响应式原理,Object.defineProperty

热度:95   发布时间:2023-10-29 20:24:12.0

记录一下代码!

<!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 = newValtitle.innerHTML = newVal;},get: function(){return val}})}var i = 0;btn.addEventListener("click",function(){i++;data.title += i;console.log(data)});</script>
</body>
</html>

  相关解决方案