vue源码—03依赖收集与追踪

男娘i 2022-02-03 23:39 90阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6][]

// new KVUE({data:{...}})
    
    class KVue {
        constructor(options) {
            this.$options = options;
    
            // 数据响应化
            this.$data = options.data;
            this.observe(this.$data)
    
            //模拟一下watcher的创建
            new Watcher();
            this.$data.test;
            new Watcher();
            this.$data.foo.bar;
    
        }
        observe(value) {
            if (!value || typeof value !== 'object') {
                return
            }
    
            // 遍历该对象
            Object.keys(value).forEach(key => {
                // 定义响应化
                this.defineReactive(value, key, value[key])
            })
        }
    
        // 数据的响应化
        defineReactive(obj, key, val) {
            this.observe(val);//解决数据嵌套
    
            // 初始化dep
            const dep = new Dep();
    
            Object.defineProperty(obj, key, {
                get() {
                    Dep.target && dep.addDep(Dep.target)
                    return val;
                },
                set(newVal) {
                    if (newVal === val) {
                        return;
                    }
                    val = newVal;
                    dep.notify();
                    // console.log(`${key}属性更新了:${val}`);
                }
            })
        }
    }
    
    // Dep 用来管理watcher
    class Dep {
        constructor() {
            // 这里存放若干依赖（watcher）
            this.deps = [];
        }
    
        addDep(dep) {
            this.deps.push(dep)
        }
    
        notify() {
            this.deps.forEach(dep=>dep.update())
        }
    }
    
    // watcher
    class Watcher {
        constructor(){
            // 将当前watcher实例指定到Dep静态属性target
            Dep.target = this
        }
        update() {
            console.log('属性更新了')
        }
    }

html

<html>
    
    <head>
        <title>definedproperty</title>
    </head>
    
    <body>
        <script src="./kvue.js"></script>
        <script>
            const app = new KVue({
                data: {
                    test: "I am test",
                    foo: {
                        bar: "bar"
                    }
                }
            });
            app.$data.test = "hello, jjsun";
            app.$data.foo.bar = "oh my bar";
        </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220204/02952b99b7434ffd9d0f697249a7452b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190506141219773.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220204/a6df153b67ad4bef9c1a56ef3f416b26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220204/9ea88275157546c0bd4f0d8edb63219f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220204/08126c0ce521499880ad6f08e4f807fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5]: /images/20220204/690c6ca08c524f759db186f5ed36600b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6]: /images/20220204/98f725258f2a4621ba51a0a7e152ba41.png