//html
<ul></ul>
//js部分
<script>
var ul = document.querySelector('ul');
var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
const _render = element => {
var str = `<li>姓名:<span>${person.name}</span></li>
<li>性别:<span>${person.sex}</span></li>
<li>年龄:<span>${person.age}</span></li>
<li>身高:<span>${person.height}</span></li>
<li>体重:<span>${person.weight}</span></li>`
element.innerHTML = str;
}
_render(ul);
// 补全代码
// 监听对象入口
function obseve(targetObj){
if(targetObj === null || typeof targetObj !== "object" ){
return targetObj
}
for (const key in targetObj) {
defineReactive(targetObj,key,targetObj[key])
}
}
// 正式劫持和监听对象
function defineReactive(targetObj,key,value){
Object.defineProperty(targetObj,key,{
get(){
return value
},
set(setVal){
if(setVal !== value){
value = setVal
_render(ul)
}
}
})
}
// 传入需要监听的对象
obseve(person)
Object.defineProperty实时监听数据变化并更新页面
最新推荐文章于 2024-05-11 13:55:50 发布