mini-vue(coderwhy学习笔记）

最新推荐文章于 2024-05-10 10:02:48 发布

skylon2

最新推荐文章于 2024-05-10 10:02:48 发布

阅读量202

点赞数

分类专栏： vue3+TS学习（coderwhy）文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_42174885/article/details/120036680

版权

vue3+TS学习（coderwhy）专栏收录该内容

2 篇文章

订阅专栏

该博客详细解析了`createApp`函数中的`mount`方法，展示了Vue.js应用如何初始化渲染和后续的更新过程。通过`watchEffect`观察器，当组件状态变化时，旧虚拟DOM（VNode）被新VNode替换，实现DOM的高效更新。此博文深入探讨了Vue.js的响应式系统和DOM diff策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function createApp(rootComponent) {
    return {
        mount(selector) {
            const container = document.querySelector(selector)
            let oldVNode;
            let isMounted = false;

            watchEffect(function() {
                if (!isMounted) {
                    oldVNode = rootComponent.render()
                    mount(oldVNode, container)
                    isMounted = true;
                } else {
                    const newVNode = rootComponent.render()
                    patch(oldVNode, newVNode);
                    oldVNode = newVNode
                }
            })
        }
    }
}