vue底层原理----数据双向绑定 最核心代码(简化版)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue底层原理核心代码</title>
</head>
<body>
    <div id="app">

    </div>


    <script>
        let data = {shuzi:0}
        let active 
        //这行开始vue的响应式 内部逻辑核心代码学习
        function xiangyingshi(data) {
            console.log('这里开始核心逻辑了')
            for(let key in data) {
                let value = data[key] //对象对应的值
                let dep = []
                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(watcher =>watcher())
                    }
                })
            }
        }
        xiangyingshi(data)
        const watcher = (fn)=>{
            active = fn 
            fn()
            active = null
        }
        watcher(()=>{
            app.innerHTML = data.shuzi
        })
        watcher(()=>{
            console.log(data.shuzi)
        })
    </script>
</body>
</html>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页