Vue3编译器

最新推荐文章于 2025-02-17 09:33:06 发布

Justin3go

最新推荐文章于 2025-02-17 09:33:06 发布

阅读量2.5k

点赞数 1

分类专栏：前端学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_47042983/article/details/122777752

版权

本文深入探讨Vue3编译器的作用，包括静态优化选项、动态相关优化，如事件处理程序的缓存，以及block的概念。通过编译器生成的提示，Vue3能更高效地进行虚拟DOM diff，减少不必要的渲染，从而提高性能。

摘要由CSDN通过智能技术生成

Vue3 编译器

本章主要介绍Vue3编译器的作用，这个编译器是如何提高性能的，静态dom与动态dom的不同处理，缓存的使用以及块的作用。

致谢Vue Mastery非常好的课程，可以转载，但请声明源链接：文章源链接justin3go.com(有些latex公式某些平台不能渲染可查看这个网站)

<div>foo</div>

上面是源模板，下面是生成的渲染函数代码

{
   
    export function ssrRender(_ctx, _push, _parent) {
   
        _push(`<div>foo</div>`)
    }
}

有什么作用：在开发过程中，用这个来调试编译器，知道实际是怎么运行的；

右上角的是一些优化选项，这里都是静态的，所以可以打开这个选项：

然后对应的编译代码也会发生变化：

以便在每次组件更新的时候可以在每个渲染器上重用它，一旦一个节点被提升，它就会被创建一次在渲染函数之外，在以后的每一次渲染中，它将在这里重新使用，两个好处：