vue中的双向数据绑定的实现(数据劫持,结合发布者---订阅者模式)

代码简单原理的实现:


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title>
head>
<body>
    <input type="text" id="userName">
    <br/>
    <span id="uName">span>

    <script type="text/javascript">

        var obj={
            pwd:"123456"
        };
        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(){
            obj.userName=event.target.value;
        });

    script>
body>
html>

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

你可能感兴趣的:(vue)