底层的原理是实用数据代理,利用js的defineProperty函数,测试DEMO为了理解用,仅支持了一级对象。控制台重写调试:data.name='xxxx',不可以直接重新赋值整个对象,比如data={name:'xxx',age:'xxx'}
实现思路:
1、先创建一个原始对象data;
2、创建一个监听对象Observer,监听data属性变化;
3、通过Object.keys把data里的所有元素,生成为数组;
4、遍历数组,生成数据代理obs,obs=data数据同步;
5、创建实例对象vm,vm._data = data =obs;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js底层数据代理实现原理代码</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> -->
</head>
<body>
    <div id="demo">

    </div>

    <script>
        // Vue.config.productionTip=false;

        let data = {
            name:'任慈',
            age:3,
        }

        function Observer(obj){
            
            //汇总对象中所有的属性形成一个数组
            const keys = Object.keys(obj);
            //箭头函数中的this,代表的上级,如果用普通函数,在循环体外上方定义一个that = this即可
            keys.forEach((k)=>{
                Object.defineProperty(this,k,{
                    get(){
                        return obj[k];
                    },
                    set(value){
                        console.log(k+'被修改了,这里执行去修改模版的代码,生成虚拟DOM...');
                        obj[k] = value;
                    }
                })
            })

        }

        //创建一个监听对象监听data属性变化
        const obs = new Observer(data);
        console.log(obs);
        //创建一个vm实例对象
        let vm = {}
        vm._data = data = obs;

    </script>
</body>
</html>


点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部