珠峰-2024年从零实现最新完整Vue3.4源码（高の青）

// 简单的 Vue 对象
class Vue {
    constructor(options) {
        this.data = options.data();
        this.methods = options.methods || {};
        this.render = options.render;
        
        // 创建代理以支持this.data的访问
        this.proxyData();

        // 渲染一次
        this.update();
    }

    proxyData() {
        for (const key in this.data) {
            Object.defineProperty(this, key, {
                get: () => this.data[key],
                set: (newValue) => {
                    this.data[key] = newValue;
                    this.update();
                }
            });
        }
    }

    update() {
        const vnode = this.render.call(this);
        this.mount(vnode);
    }

    mount(vnode) {
        const app = document.getElementById('app');
        app.innerHTML = '';
        app.appendChild(this.createElement(vnode));
    }

    createElement(vnode) {
        if (typeof vnode === 'string') {
            return document.createTextNode(vnode);
        }
        const el = document.createElement(vnode.tag);
        for (const key in vnode.props) {
            el.setAttribute(key, vnode.props[key]);
        }
        vnode.children.forEach(child => {
            el.appendChild(this.createElement(child));
        });
        return el;
    }
}

// 使用这个简单的 Vue 实现
const app = new Vue({
    data() {
        return {
            message: 'Hello Vue!',
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    },
    render() {
        return {
            tag: 'div',
            props: {},
            children: [
                { tag: 'h1', props: {}, children: [this.message] },
                { tag: 'button', props: { onclick: () => this.increment() }, children: ['Increment'] },
                { tag: 'p', props: {}, children: [`Count: ${this.count}`] }
            ]
        };
    }
});