分别使用Object.defineProperty()和new Proxy()演示双向数据绑定

最新推荐文章于 2024-07-13 21:46:00 发布

qq236710052

最新推荐文章于 2024-07-13 21:46:00 发布

阅读量530

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq236710052/article/details/104422372

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Object.defineProperty()

<input id="myinput" type="text" />   
<div id="mytxt"></div> 
<script>
    let data={content:''}
    document.getElementById("myinput").addEventListener("input",function(){
        data.content = this.value;
        document.getElementById("mytxt").innerHTML = this.value;
    });
    let toValue = {
        get() {
            //返回经过处理后的变量
            return value;
        },
        set(newValue) {
            //属性发生变化
            value = newValue
            document.getElementById("myinput").value = newValue
            document.getElementById("mytxt").innerHTML = newValue
        }
    }
    Object.defineProperty(data,'content',toValue); 
</script>

new Proxy()

<input id="myinput" type="text" />   
<div id="mytxt"></div> 
<script>
    let toValue = {
        get(obj, prop, value) {
            return value
        },
        set(obj, prop, value) {
            //console.log(obj, prop, value);
            //属性发生变化
            obj[prop] = value;
            document.getElementById("myinput").value = value
            document.getElementById("mytxt").innerHTML = value
        }
    }
    let data=new Proxy({content:''},toValue); 
    document.getElementById("myinput").addEventListener("input",function(){
        data.content = this.value;
        document.getElementById("mytxt").innerHTML = this.value;
    });
</script>