模拟Vue的数据检测简易版

TheRivers

2022 年 01 月 19 日

345 次浏览

暂无评论

821字数

前端 Vue

模拟Vue的数据检测简易版

这里并没有彻底实现Vue底层的数据监测，只实现了一部分，因为在Vue中，虽然采用了同样的方式，但是Vue做了很多的处理，例如递归将所有的object都遍历完，还有对数组也有同样的操作。

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>江河三千里</title>
    <script type='text/javascript' src='http://ljy0427.online/js/vue.js'></script>
</head>

<body>
    <div id='app'>
    </div>
</body>
<script type='text/javascript'>
    Vue.config.productionTip = false
    let data = {
        name: "江河",
        age: 20
    }
    let that=this
    const obs=new Observer(data)
    function Observer(obj){
        const keys=Object.keys(obj)
        keys.forEach((item)=>{
            Object.defineProperty(this,item,{
                set(val){
                    console.log(`${item}被修改了,修改之前是${obj[item]},修改之后是${val}`);
                    obj[item]=val;
                },
                get(){
                    console.log(`${item}被访问了`);
                    return obj[item]
                }
            })
        })
    }
</script>

</html>