vue双向数据绑定的js原理实现

vue底层原理核心代码

body区域

<div id="app">
    </div>

js区域

let data = {shuzi:0}
        let active 
        // active = ()=>{
        //     app.innerHTML = data.shuzi 
        // }
        function xiangyingshi(data) {
            console.log('这里开始核心逻辑了')
            for(let key in data) {
                let value = data[key] //对象对应的值
                // 选择的value 0 
                let dep = []

        //         dep = [ ()=>{
        // //     app.innerHTML = data.shuzi 
        // // }]
                Object.defineProperty(data,key,{
                    get(){
                        console.log('已经进入Object.definePropertyget里面了')
                        if(active) {
                            dep.push(active)
                        } 
                        return value
                    },
                    set(newValue) {
                        console.log('已经进入Object.defineProperty set里面了')
                        value = newValue
                        dep.forEach(asasa =>asasa())
                    }
                })
            }
        }
        //传入了一个data 进行 Object.defineProperty 的一个绑定  绑定的结果 获取值的时候用get  
        //设置值的时候用 set
        xiangyingshi(data)
        const watcher = (fn)=>{
            active = fn 
            fn()
            active = null
        }
        watcher(()=>{
            app.innerHTML = data.shuzi 
        })