【手写Vue】-手撕Vue-监听数据变化

经过上一篇的介绍，已经实现了将模板编译成具体数据，接下来要介绍的是如何监听数据的变化，本章主要完成这个需求即可。

在我们文章的开始，我写了一个 Vue 双向数据绑定原理的文章当中封装了一个 Observer 类，这个类的作用就是监听数据的变化，当数据发生变化的时候，会通知订阅者，订阅者会去更新视图。

所以我先将这个类拿过来，稍微修改一下，没有这个类的源码可以去我之前的文章中查看，或者我这里也贴一下：

代码语言：javascript复制

class Observer {
    constructor(data) {
        this.observer(data);
    }

    observer(obj) {
        if (obj && typeof obj === 'object') {
            for (let key in obj) {
                this.defineReactive(obj, key, obj[key]);
            }
        }
    }

    defineReactive(obj, attr, value) {
        this.observer(value);
        Object.defineProperty(obj, attr, {
            get() {
                return value;
            },
            set: (newValue) => {
                if (value !== newValue) {
                    this.observer(newValue);
                    value = newValue;
                    console.log('监听到数据的变化, 需要去更新UI');
                }
            }
        })
    }
}

在 Nue 中，我们需要将这个类稍微修改一下，在根据指定的区域和数据去编译渲染界面这一步中，我们需要将数据传入到 Observer 类中，这样就可以监听数据的变化了。

代码语言：javascript复制

// 第一步：给外界传入的所有数据都添加get/set方法
//         这样就可以监听数据的变化了
new Observer(this.$data);

接下来是测试环节，我们在浏览器中打开页面，修改数据，看看是否会触发监听数据变化的方法：

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期 vue.js手写Vue Vue原理

0 人点赞