纯JS下如何实现自定义DOM元素随关联源数据对象变更自动更新

问题根本原因：当前代码仅在组件初始化阶段对DOM做了一次赋值，后续数据修改后没有对应的逻辑通知DOM更新，因此视图不会同步变化。以下是三种不同复杂度的实现方案：

方案一：手动触发视图更新（最简实现） #

适合小型项目，逻辑清晰无额外依赖，只需将视图更新逻辑抽为独立方法，在数据变更后手动调用即可：

const houseComponent = (houseObj) => {
    const house = document.createElement('div');
    house.className = 'house';

    const title = document.createElement('h2');
    title.innerHTML = houseObj.name;

    // 保留需要更新的DOM节点引用
    const level = document.createElement('p');
    const cost = document.createElement('p');
    const button = document.createElement('button');
    button.textContent = 'Level Up';

    // 抽离独立的视图更新方法
    const updateView = () => {
        level.innerHTML = `Level: ${houseObj.levelValue}`;
        cost.innerHTML = `Cost: ${houseObj.costValue}`;
        // 额外扩展：升级条件不足时禁用按钮
        button.disabled = !houseObj.canLevelUp();
    }

    button.onclick = function() {
        if (houseObj.canLevelUp()) {
            houseObj.levelUp();
            // 数据更新后手动调用视图刷新
            updateView();
        }
    };

    // 首次渲染调用
    updateView();

    house.appendChild(title);
    house.appendChild(level);
    house.appendChild(cost);
    house.appendChild(button);
    return house;
}

方案二：发布订阅模式（解耦实现） #

适合多模块依赖同一数据的场景，实现数据修改与视图更新的完全解耦，不需要在每个修改数据的位置手动调用更新。
首先实现基础的事件发布订阅类：

class EventEmitter {
    constructor() {
        this.events = {};
    }
    // 订阅事件
    on(eventName, callback) {
        if (!this.events[eventName]) this.events[eventName] = [];
        this.events[eventName].push(callback);
    }
    // 发布事件
    emit(eventName, ...args) {
        this.events[eventName]?.forEach(cb => cb(...args));
    }
}

修改House类继承EventEmitter，数据变更时自动发布更新事件：

class House extends EventEmitter {
    constructor(user, name, cost, level) {
        super();
        this.user = user;
        this.name = name;
        this.cost = cost;
        this.level = level;
    }

    get costValue() {
        return this.cost;
    }
    get levelValue() {
        return this.level;
    }

    setLevel = (newLevel) => {
        this.level = newLevel;
        // 数据变更时发布更新事件
        this.emit('update');
    }

    setCost = (newCost) => {
        this.cost = newCost;
        this.emit('update');
    }

    levelUp = () => {
        if (this.user.materials >= this.cost) {
            this.user.subtractMaterials(this.cost);
            this.setLevel(this.level + 1);
            this.setCost(this.cost * 1.25);
        }
    }

    canLevelUp = () => {
        return this.user.materials >= this.cost;
    }
}

最后在组件中订阅更新事件即可自动刷新视图：

const houseComponent = (houseObj) => {
    const house = document.createElement('div');
    house.className = 'house';

    const title = document.createElement('h2');
    title.innerHTML = houseObj.name;

    const level = document.createElement('p');
    const cost = document.createElement('p');
    const button = document.createElement('button');
    button.textContent = 'Level Up';

    const updateView = () => {
        level.innerHTML = `Level: ${houseObj.levelValue}`;
        cost.innerHTML = `Cost: ${houseObj.costValue}`;
        button.disabled = !houseObj.canLevelUp();
    }

    button.onclick = function() {
        houseObj.canLevelUp() && houseObj.levelUp();
    };

    // 订阅数据更新事件，自动触发视图刷新
    houseObj.on('update', updateView);
    updateView();

    house.appendChild(title);
    house.appendChild(level);
    house.appendChild(cost);
    house.appendChild(button);
    return house;
}

方案三：Proxy数据劫持（类框架响应式实现） #

适合不想修改原有类结构的场景，和主流前端框架的响应式原理一致，通过Proxy拦截属性修改自动触发更新：

// 通用响应式封装
function reactive(obj, updateCallback) {
    return new Proxy(obj, {
        set(target, prop, value) {
            target[prop] = value;
            // 属性修改后自动触发更新回调
            updateCallback();
            return true;
        }
    })
}

在组件中使用时将传入的数据源转为响应式即可：

const houseComponent = (rawHouseObj) => {
    const house = document.createElement('div');
    house.className = 'house';

    const title = document.createElement('h2');
    title.innerHTML = rawHouseObj.name;

    const level = document.createElement('p');
    const cost = document.createElement('p');
    const button = document.createElement('button');
    button.textContent = 'Level Up';

    const updateView = () => {
        level.innerHTML = `Level: ${houseObj.levelValue}`;
        cost.innerHTML = `Cost: ${houseObj.costValue}`;
        button.disabled = !houseObj.canLevelUp();
    }

    // 将原始对象转为响应式对象
    const houseObj = reactive(rawHouseObj, updateView);

    button.onclick = function() {
        houseObj.canLevelUp() && houseObj.levelUp();
    };

    updateView();

    house.appendChild(title);
    house.appendChild(level);
    house.appendChild(cost);
    house.appendChild(button);
    return house;
}

内容的提问来源于stack exchange，提问作者Patrick Kenneally