Object.defineProperty实时监听数据变化并更新页面

最新推荐文章于 2022-12-17 17:27:23 发布

追逐梦想之路_随笔

最新推荐文章于 2022-12-17 17:27:23 发布

阅读量292

点赞数 1

分类专栏： javaScript实战篇

本文链接：https://blog.csdn.net/qq_44472790/article/details/126128079

版权

javascript

javaScript实战篇专栏收录该内容

49 篇文章 1 订阅

订阅专栏

	 //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)