利用原生JS实现VUE中的双向绑定

Posted mCod

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用原生JS实现VUE中的双向绑定相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
    <script>
        var obj = {
            pwd: "1234"
        };
        //主要使用到了get和set方法，最为关键
        Object.defineProperty(obj, "userName", {
            get: function() {
                console.log(‘get init‘);
            },
            set: function(val) {
                console.log("set init");
                document.getElementById("uName").innerText = val;
                document.getElementById("userName").value = val;
            }
        });
        document.getElementById("userName").addEventListener("keyup", function(event) {
            obj.userName = event.target.value;
        })
    </script>
</body>

</html>

运行上述的dome，可以使用控制台，obj.username=123赋值，会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法，也就是vue的双向数据绑定的核心点。

以上是关于利用原生JS实现VUE中的双向绑定的主要内容，如果未能解决你的问题，请参考以下文章

vue.js的双向绑定,我们用原生js来实现

Vue3的双向绑定是如何实现的

js设计模式-观察者模式来模拟vue的双向数据绑定

Vue.js双向绑定的实现原理

如何创建从 vue.js 实例到自定义原生 Web 组件的双向绑定？

Vue.js双向绑定原理