手撕Vue-监听数据变化

合集 - 手写Vue全家桶(16)

1.Vue双向数据绑定原理-上2023-09-272.Vue双向数据绑定原理-中2023-09-303.Vue双向数据绑定原理-下2023-09-304.手撕Vue-构建Vue实例2023-10-035.手撕Vue-提取元素到内存2023-10-146.手撕Vue-查找指令和模板2023-10-157.手撕Vue-编译指令数据2023-10-158.手撕Vue-编译模板数据2023-10-15

9.手撕Vue-监听数据变化2023-10-15

10.手撕Vue-数据驱动界面改变上2023-10-1511.手撕Vue-数据驱动界面改变中2023-10-1512.手撕Vue-数据驱动界面改变下2023-10-1913.手撕Vue-界面驱动数据更新2023-10-2114.手撕Vue-实现事件相关指令2023-10-2115.手撕Vue-实现将数据代理到Vue实例2023-10-2116.手撕Vue-实现计算属性2023-10-21

收起

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

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

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

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 类中，这样就可以监听数据的变化了。

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

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