server-renderer: 用于SSR服务端渲染的逻辑 shared: Vue3 工具库,一些通用方法 size-check: 用于测试tree shaking 后代码大小的示例库 template-explorer: 用于检查模板编译后的输出, 主要用于开发调试 vue: Vue3 主入口文件,包括运行时和 编译器 3.2 最重要源码模块 通过目录名称我们可以看到package中最重要的模块有...
template-explorer:用于调试编译器输出的开发工具 shared:多个包之间共享的内容 vue: 完整版本,包括运行时和编译器 +---+ | | | @vue/compiler-sfc | | | +---+---+---+ | | v v +---+ +---+ | | | | +--->| @vue/compiler-dom +--->| @vue/compiler-core | | | | | | +-...
template-explorer 用于检查模板编译后的输出,主要用于开发调试 vue Vue 3 的主要入口,包括运行时和编译器,包括几个不同的入口(开发版本、runtime 版本、full 版本) 上述包中,剔除服务端渲染相关代码、开发调试、测试相关代码,并将它们的依赖关系体现出来,则大致是这样的(来自 Vue 3 仓库): 可见Vue 3 的模块关系...
Vue2-template:https://template-explorer.vuejs.org/#%3Cdiv%20id%3D%22app%22%3E%0A%20%20%7B%7B%20msg%20%7D%7D%0A%3C%2Fdiv%3E Vue3-template:https://vue-next-template-explorer.netlify.app/#%7B%22src%22%3A%22%3Cdiv%20id%3D%5C%22app%5C%22%3E%5Cr%5Cn%20%20%7B%7B%20msg%20...
vue3对于不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用即可。 例如:下面我们利用Vue 3 Template Explorer,来直观的感受一下: 静态提升之前 静态提升之后 从以上代码中我们可以看出,_hoisted_1 和_hoisted_2两个方法被提升到了渲染函数 render 之外,也就是我们说的静态提升。通过静态提升可以避免...
Vue3 相比于 Vue2,虚拟DOM上增加 patchFlag 字段。我们借助Vue3 Template Explorer来看。 字段类型情况:1 代表节点为动态文本节点,那在 diff 过程中,只需比对文本对容,无需关注 class、style等。除此之外,发现所有的静态节点(HOISTED 为 -1),都保存为一个变量进行静态提升,可在重新渲染时直接引用,无需重新创建...
Vue3 支持了多根节点组件,也就是fragment。 Vue2中,编写页面的时候,我们需要去将组件包裹在中,否则报错警告。 <template> ... ... ... </template> Vue3,我们可以组件包含多个根节点,可以少写一层,niceeee ! <template> ... ... ... </template> 异步组件 Vue3 提供Suspense组件...
vue3初探 在开始介绍之前,先给大家推荐一个网站https://vue-next-template-explorer.netlify.app。这是Vue3官方演示Vdom的示例网站,本篇文章也是基于它进行演示的。 Vue3 在Vdom的更新时,只会关注它有变化的部分。这样的优化使 Vue3 既跳出了 Vdom 的性能瓶颈,又依然保留了可以手写render function的灵活性。相当...
在Vue2中,每次更新diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗 Vue Template Explorer我们可以通过这个网站看到静态标记 patch flag 优化静态树 Hello world!Hello world!Hello world!Hello world!{{msg}}Hello world!Hello world! Vue3编译后的Vdom是这个样子的 export functio...
实际上,Vue3 带来的更新,远不止这些,为此我梳理了一个 Vue3 的知识图谱,尽可能囊括一些本文未提到的特性。 如上图,Vue 不但重写了 diff 算法,还在编译阶段做了很多优化,编译时优化可以通过这个网站看出来:https://vue-next-template-explorer.netlify.app/。