在JavaScript中实现MVVM（Model-View-ViewModel）架构下的数据绑定，主要通过观察者模式、发布/订阅模式和数据劫持等技术来完成。下面我将概述几种常见的实现方式，以及如何在不使用框架的情况下手动实现数据绑定。

使用框架实现数据绑定

大多数现代前端框架如Vue.js、Angular和React都内置了数据绑定功能，其中Vue.js和Angular提供了双向数据绑定，而React则偏向于单向数据流。

Vue.js

Vue.js使用了基于Object.defineProperty()的数据劫持技术来实现响应式数据绑定。当数据发生变化时，视图会自动更新。

Angular

Angular使用区变检测机制（Change Detection）来实现数据绑定，它会在每次事件触发或异步任务完成时检查模型的变化并更新视图。

React

React虽然不提供内置的双向数据绑定，但通过状态管理和props传递可以实现单向数据流，使用useState和useEffect等Hooks可以实现局部的响应式更新。

手动实现数据绑定

如果想要手动实现MVVM的数据绑定，可以参考Vue.js的实现原理，使用数据劫持和发布订阅模式。

数据劫持

数据劫持是通过重写Object.defineProperty()来实现的。当访问或修改数据时，可以触发特定的函数，从而实现对数据变化的监听。

function defineReactive(obj, key, val) {
    observe(val); // 如果val是对象，递归observe
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            return val;
        },
        set: function reactiveSetter(newVal) {
            if (newVal !== val) {
                observe(newVal); // 同样观察新值
                val = newVal;
            }
        }
    });
}

function observe(value) {
    if (!value || typeof value !== 'object') {
        return;
    }
    if (Array.isArray(value)) {
        value.__proto__ = observerArray;
    } else {
        new Observer(value);
    }
}

var observerArray = Object.create(Array.prototype, {
    push: { value: function push(...args) {
        var inserted = [];
        for (let i = 0; i < args.length; i++) {
            inserted.push(observe(args[i]));
        }
        Array.prototype.push.apply(this, inserted);
    }},
    // ...其他数组方法类似处理
});

class Observer {
    constructor(value) {
        this.walk(value);
    }
    walk(obj) {
        Object.keys(obj).forEach(key => {
            defineReactive(obj, key, obj[key]);
        });
    }
}

发布订阅模式

数据变化时，发布者（通常是数据模型）通知观察者（通常是视图）。这通常通过事件机制实现。

class Dep {
    constructor() {
        this.subs = [];
    }
    addSub(sub) {
        this.subs.push(sub);
    }
    notify() {
        this.subs.forEach(sub => sub.update());
    }
}

class Watcher {
    constructor(expr, cb) {
        this.expr = expr;
        this.cb = cb;
        this.value = this.get();
    }
    get() {
        Dep.target = this;
        let val = eval(this.expr);
        Dep.target = null;
        return val;
    }
    update() {
        let oldValue = this.value;
        this.value = eval(this.expr);
        if (this.value !== oldValue) {
            this.cb.call(this, this.value);
        }
    }
}

在实际应用中，上述代码需要结合HTML模板解析和编译，以及DOM操作，才能完整实现数据绑定。