简易双向绑定

valives

已于 2022-06-21 15:15:58 修改

阅读量157

点赞数

分类专栏： web前端文章标签： javascript 前端 html

于 2022-06-21 14:36:11 首次发布

本文链接：https://blog.csdn.net/weixin_45807026/article/details/125390636

版权

web前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

本文详细介绍了Vue 2.0和3.0中实现双向绑定的不同方法。在Vue 2.0中，通过`Object.defineProperty`来设置getter和setter实现数据绑定；而在Vue 3.0中，利用了新的`Proxy`对象，能够更加灵活地监听和处理数据变化，实现双向绑定。通过示例代码展示了两种实现方式的效果。

摘要由CSDN通过智能技术生成

vue2.0双向绑定简易实现。

<body>
    <input type="text" id="input">
    <p id="p"></p>
    <script type="text/javascript">
        var input =document.getElementById('input')
        var p=document.getElementById('p')
        var obj={}
        Object.defineProperty(obj,'name',{
            set:function(val){
                input.value=val
                p.innerHTML=val
            },
            get:function () {
                return val
            }
        })
        input.addEventListener('input',function(e){
            obj.name=e.target.value
        })

    </script>
</body>

效果如下：
在这里插入图片描述
vue3则使用proxy实现双向绑定。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="input">
<div id="txt"></div>
</body>
<script>
   let oInput=document.getElementById('input');
   let oTxt=document.getElementById('txt');
   let obj={};
    // obj添加代理对象
   let newProxy=new Proxy(obj,{
    get:(target,key,recevier)=>{
        // Reflect获取目标对象的行为，类似Object，更易读，和proxy方法对应。
        return Reflect.get(target,key,recevier);
    },
    set:(target,key,value,recevier)=>{
        console.log(target,key,recevier);
        // 监听newProxy变化
        if (key=="text") {
            oTxt.innerHTML=value;
        }
        // 变化反射回原对象
        return Reflect.set(target,key,value,recevier);
    }
   })
//   监听输入事件
   oInput.addEventListener("keyup",(e)=>{
    // 修改代理对象值 
    newProxy.text=e.target.value;
   })
</script>
</html>

效果为：
在这里插入图片描述