vue2、vue3双向绑定原理，纯html+JavaScript简单demo

原创已于 2025-11-04 15:29:05 修改 · 262 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2025-05-22 17:17:36 首次发布

官网的解释会比较抽象，还是代码实践才能让人对知识理解得更透彻，以下是简单的小实例。
1.vue2使用的是ES5的Object.defineProperty实现的。
2.vue3使用的是ES6的new Proxy方法。
（可以复制粘贴到本地，运行尝试一下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES5、ES6绑定</title>
</head>
<body>
<span>ES5 vue2双向绑定简单示例（Object.defineProperty）</span>
<div>
    <input type="text" id='d0'/>
    <span>内容：</span>
    <span id='d1'></span>
</div>

<br/><br/><br/>

<span>ES6 vue3双向绑定简单示例（代理Proxy）</span>
<div>
    <input type="text" id='e0'/>
    <span>内容：</span>
    <span id='e1'></span>
</div>

<script>
    /***ES5 vue2双向绑定简单示例（Object.defineProperty）***/
    let obj = {};//定义一个对象
    Object.defineProperty(obj,"param",{
        get(){
            return "";
        },
        set(v){
            document.getElementById("d1").innerText = v;//截取对象set方法，给元素赋值
        }
    })
    document.getElementById("d0").addEventListener("input",function (e){
        obj.param = e.target.value;//监听输入框，给对象设置值
    })
    /***---------------------------------------------***/


    /***ES6 vue3双向绑定简单示例（代理Proxy）***/
    let data = {};// 定义一个对象
    let objE = new Proxy(data,{
        get(target, key) {
            return "";
        },
        set(target, key, value) {
            document.getElementById("e1").innerText = value;//截取对象set方法，给元素赋值
        },
    });
    document.getElementById("e0").addEventListener("input",function (e){
        objE.param = e.target.value;//监听输入框，给对象设置值
    })
    /***---------------------------------------------***/
</script>
</body>
</html>

标签

#javascript #vue