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

高shan仰止

已于 2023-03-27 17:45:44 修改

阅读量198

点赞数

文章标签： vue.js javascript 前端

于 2020-12-01 19:19:18 首次发布

本文链接：https://blog.csdn.net/gaoshanyz/article/details/110448436

版权


<!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.defineProperty get里面了')
                        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>