vue双向数据绑定原理1、实现一个数据监听器Observer，Vue内部通过Object.defineProperty属

1、实现一个数据监听器 Observer， Vue内部通过Object.defineProperty属性拦截的方式，把date对象里每个数据的读写转化成set 和 get，当数据变化时通知视图更新

2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

3、实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

4.图片解析

5.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text"></div>
    <input type="text" id="inp">
</body>
</html>
<script>
    var text=document.querySelector("#text")
    var inp=document.querySelector("#inp")
    var obj={}
    var val
    Object.defineProperty(obj,"username",{
        get(){
            //只要获取属性自动调用geeter
            return val
            
        },
        set(newval){
            //设置属性值就会自动调用setter
            val=newval
            //设置文本框数据和显示的数据
            inp.valve=newval
            text.innerHTML=newval
        }
    })
    obj.username='小六'
    
    inp.addEventListener("input",function(e){
        console.log(e)
        obj.username=e.data
    })
</script>