从零手写Vue之虚拟dom

windliang

发布于 2022-09-23 13:20:54

2140

发布于 2022-09-23 13:20:54

前边的6篇文章的文章介绍了虚拟 dom ，没看过的同学推荐直接到网站 vue.windliang.wang/ 看一下。

这篇文章主要是按照 Vue2 源码的目录格式和调用过程，把我们之前写的虚拟 dom 代码位置整理一下。

相比于从零手写 Vue 之响应式系统，这次还新建了 code/VueLiang1/src/platforms/web 目录，将和 web 相关的操作都放到了该目录中，并且把 Vue 的入口文件换为平台相关的 code/VueLiang1/src/platforms/web/entry-runtime.js 。

这次的测试文件就已经非常有 Vue 那味儿了。

import Vue from "./src/platforms/web/entry-runtime";

new Vue({
    el: "#root",
    data() {
        return {
            test: 1,
            name: "data:liang",
        };
    },
    watch: {
        test(newVal, oldVal) {
            console.log(newVal, oldVal);
        },
    },
    computed: {
        text() {
            return "computed:hello:" + this.name;
        },
    },
    methods: {
        hello() {
            console.log("调用methods:hello");
            return "调用methods:hello";
        },
        click() {
            this.test = 3;
            this.name = "wind";
        },
    },
    render(createElement) {
        const test = createElement(
            "div",
            {
                on: {
                    click: () => this.click(),
                    dblclick: () => this.hello(),
                },
            },
            [this.text, createElement("div", this.test)]
        );
        return test;
    },
});

我们实现了核心的响应式系统，还有之前的 watch 和 computed ， render 函数可以直接通过 createElement 来生成虚拟 dom 。看一下效果：