首页 > 其他分享 >模拟数据监控(get和set)

模拟数据监控(get和set)

时间:2022-12-07 20:58:36浏览次数:41  
标签:set obj get keys vm data 模拟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 
        1.自动生成get和set好处
          1.可以永远给下一层级找到get和set
          2.更加简洁(自己写的get和set,修改值比较麻烦:vm.__data.name='修改')vm自己的(vm.name='修改')
         -->
        <script src="./vue.js"></script>
    </head>
    <body>
        
            <!-- <h1>{{name}}</h1>
            <h2>{{address}}</h2> -->
        
        <script type="text/javascript">
            let data = {
                name:'尚硅谷',
                address:'北京'
            }
            //创建一个监视的实例对象,用于监视data中属性变化
            const obs = new Observer(data)
            console.log(obs)
            //准备一个vm实例对象
            let vm = {}
            vm.__data = data = obs
            function Observer(obj){
                //汇总对象中所有的属性形成一个数组
                const keys = Object.keys(obj)
                ///遍历
                keys.forEach((k)=>{
                    Object.defineProperty(this,k,{
                        get(){
                            return obj[k]
                        },
                        set(val){
                            // console.log(`${k}被改了,去解析模板,生成虚拟dom`)
                            obj[k] = val
                        }
                    })
                })
            }
        </script>
    </body>
</html>

 

标签:set,obj,get,keys,vm,data,模拟
From: https://www.cnblogs.com/wsx123/p/16964499.html

相关文章