前端论道

vite预构建的主要处理逻辑，总结起来就是先查找需要预构建的依赖，然后将这些依赖作为entryPoints进行构建，构建完成后更新缓存。

目前现代化的JS开发方式大行其道。撸代码时，你可能也会不理解为啥要使用这些繁复的现代化工具。 接下来我们就来一起学习下js模块、模块化解决方案、模块加载器和模块打包器的区别。 本文的主要意图是帮大家快速理解现代前端JS开发的概念，并不会深入去探讨每种工具和模式。 模块是一块可复…

在docker的实践过程中，如果没有注意docker对磁盘的占用，在某一天你可能发现磁盘空间已经被docker一点点吃掉了。那么今天给大家介绍几个清理docker镜像、容器和数据卷的常用命令。 docker提供了一个命令，可以清理任何悬空资源（镜像、容器、数据卷和网络）。 如果…

每个 Vue 实例在被创建时都会经过一系列的初始化过程。例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。 为了让开发者在Vue实例生命周期的不同阶段有机会插入自己的代码逻辑，vue提供了一种叫做生命周期钩子的函数。主要的生命周期钩子如下：…

有些业务场景需要根据不同的判断条件，动态地在多个组件之间切换。频繁的组件切换会导致组件反复渲染，如果组件包含有大量的逻辑和dom节点，极易造成性能问题。其次，切换后组件的状态也会完全丢失。keep-alive的设计初衷就是为了保持组件的状态，避免组件的重复渲染。 开发者无需注册…

组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。本文我们一起从源码的角度，了解一下组件的底层实现原理。 在Vue中使用组件，要做的第一步就是注册。Vue提供了全局注册和局部注册两种方式。 全局注册的组件…

从上篇文章《编译过程解析》中，我们了解到HTML模板经过编译，最终会生成一个render函数。render函数的主要功能是生成vnode。在vue的渲染过程中总共涉及两大工作：创建vnode和创建DOM节点。本篇文章作为上一篇的延续，重点聊聊渲染过程的实现。 大家知道一个复杂的…

先正式讲解之前先看一张来自Vue官网的实例生命周期图。 由图中可知，当我们实例化一个Vue对象并完成初始化后，Vue会检查el和template属性，以获取模板字符串。然后将得到的模板编译成render函数。 只有当template未指定时，vue才会以所制定的el元素的out…

一切都显得那么自然。不过在百忙之中是否有小伙伴想过，一个小小的Vue实例怎么有这么大的能量，竟然可以构建出如此复杂的前端项目。那么Vue内部是如何运转的呢，做了哪些事情呢，从今天开始跟着我一探究竟。 从Vue的构造函数中可以看到，当我们执行new Vue()的时候，只执行了一个…