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

最新推荐文章于 2024-03-01 07:45:00 发布

jiaojsun

最新推荐文章于 2024-03-01 07:45:00 发布

阅读量214

点赞数

分类专栏： vue源码

本文链接：https://blog.csdn.net/jiaojsun/article/details/89882261

版权

vue源码专栏收录该内容

5 篇文章 2 订阅

订阅专栏

// 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>

jiaojsun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue源码—03依赖收集与追踪

js// new KVUE({data:{...}})class KVue { constructor(options) { this.$options = options; // 数据响应化 this.$data = options.data; this.observe(thi...
复制链接

扫一扫