闭门苦练Vue3后, Java一族何时一统天下?

Java与JavaScript的爱恨情仇

初学 Java 时对于 Java 与 JavaScript 老是傻傻分不清. 觉得我们大Java 真是太厉害了, 为了开发网页搞了个独立的脚本语言, 到后来才发现两者, 不仅语法不一样, 而且不支持互相转换, 甚至 JavaScript 还不是跑在 JVM, 它家住在 V8, 最后 JavaScript 借助其有个内嵌浏览器就能跑的特性, 挤压这Java在Android以及PC的领域. 甚至它的小弟 NodeJS还想在后端开发, 云函数等领域分一杯羹, 每每想起曹丕的话,闪闪的泪光鲁冰花, 本是同根生, 相煎何太急？

1995年，网景招募了布兰登·艾克，目标是把Scheme语言嵌入到Netscape Navigator浏览器当中。但更早之前，网景已经跟昇阳合作在Netscape Navigator中支持Java，这时网景内部产生激烈的争论。后来网景决定发明一种与Java搭配使用的辅助脚本语言并且语法上有些类似，这个决策导致排除了采用现有的语言，例如Perl、Python、Tcl或Scheme。为了在其他竞争提案中捍卫JavaScript这个想法，公司需要有一个可以运作的原型。艾克在1995年5月仅花了十天时间就把原型设计出来了。

看来 Java 与 JavaScript 冥冥中确实有一丝联系, Java 的开发者也可以尝试着学习 JavaScript来改进Java的不足, 最终让各自的代码进行通用编译, 做到一次编写, 到处运行. 不管是Java还是JS, 最终字节码都跑在各自适合的场景, 双方能少造不少轮子. 总之听曹丕的话, 别让他受伤 !

让我们一起闭门苦练Vue3吧! 少造(写)轮(代)子(码)码的愿望就一定要实现!

Vite 真快

Vite（法语为“ fast”，发音为/vit/）是一种构建工具，旨在为现代Web项目提供更快，更精简的开发体验。它包括两个主要部分：

一个开发服务器，它在本机ES模块上提供了丰富的功能增强功能，例如，极快的热模块更换（HMR）。
一个构建命令，它将您的代码与Rollup捆绑在一起，该Rollup已预先配置为输出高度优化的静态资产进行生产。

Vite固执己见，并具有开箱即用的明智默认设置，但通过其Plugin API和JavaScript API具有完全键入支持，它也可以高度扩展。

基于 vitejs/create-app 创建我们的模板项目 (提前安装 nodejs/yarn lts 环境) https://vitejs.dev/guide/#scaffolding-your-first-vite-project yarn create @vitejs/app

Test 批量 CURD 40行代码的热更新速度 (目测比 Webpack 快很多)

为什么 Vite 这么快? 它有那些特性呢 ?

告别捆绑开发, 按需加载就是快 ! https://vitejs.dev/guide/why.html#the-problems

大家都使用过 webpack，Rollup和Parceljs 等工具构建我们的前端项目, 但是，随着我们开始构建越来越雄心勃勃的应用程序，我们正在处理的JavaScript数量也呈指数增长。大型项目包含数千个模块的情况并不少见。我们开始遇到基于JavaScript的工具的性能瓶颈：启动开发服务器通常会花费不合理的长时间等待（有时可能长达数分钟！），即使使用HMR，文件编辑也可能需要花费几秒钟的时间才能反映出来。在浏览器中。缓慢的反馈循环会极大地影响开发人员的生产力和幸福感。

Vite 如何优化服务器启动缓慢

Vite通过首先将应用程序中的模块分为两类来缩短开发服务器的启动时间：依赖项和源代码。

依赖关系大多是普通的JavaScript，在开发过程中不会经常更改。一些较大的依赖项（例如，具有数百个模块的组件库）的处理成本也很高。依赖关系也可能以各种模块格式（例如ESM或CommonJS）提供。 Vite 预束依赖性使用esbuild。Esbuild是用Go编写的，并且与基于JavaScript的捆绑器相比，捆绑前的依赖关系要快10-100倍。
源代码通常包含需要转换的非普通JavaScript（例如JSX，CSS或Vue / Svelte组件），并且将经常进行编辑。同样，并非所有源代码都需要同时加载（例如，使用基于路由的代码拆分）。 Vite通过本机ESM提供源代码。这实质上是让浏览器接管捆绑器的部分工作：Vite只需要根据浏览器的要求按需转换和提供源代码即可。条件动态导入后面的代码只有在当前屏幕上实际使用时才被处理。

Vite 如何优化代码热更新慢

在基于捆绑程序的构建设置中编辑文件时，由于显而易见的原因，重建整个捆绑软件效率很低：更新速度会随着应用程序的大小线性降低。

某些捆绑程序开发服务器在内存中运行捆绑程序，因此仅在文件更改时才需要使模块图的一部分无效，但仍需要重新构建整个捆绑程序并重新加载网页。重建捆绑包可能会很昂贵，并且重新加载页面会破坏应用程序的当前状态。这就是为什么某些捆绑软件支持热模块更换（HMR）的原因：允许模块“热更换”自身而不影响页面的其余部分。这极大地改善了DX-但是，实际上，我们发现，随着应用程序大小的增长，甚至HMR更新速度也会大大降低。

在Vite中，HMR是在本机ESM上执行的。编辑文件时，Vite只需要使已编辑模块与其最接近的HMR边界之间的链精确失效（大多数情况下，仅是模块本身）即可，无论应用程序的大小如何，都能始终如一地快速更新HMR。

Vite还利用HTTP标头来加快整个页面的重新加载速度（再次，让浏览器为我们做更多的工作）：源代码模块请求通过设置为有条件的304 Not Modified，而依赖模块请求通过进行了强烈缓存，Cache-Control: max-age=31536000,immutable因此它们不会再次访问服务器一旦缓存。

一旦您体验了Vite的速度，我们高度怀疑您是否愿意忍受捆绑开发。

诸多先进的特性

Vite提供一流的Vue支持。
Vite支持.ts开箱即用地导入文件。
Vite通过本机ESM提供了HMR API。具有HMR功能的框架可以利用API提供即时，准确的更新，而无需重新加载页面或破坏应用程序状态。Vite为Vue单个文件组件和React快速刷新提供了第一方HMR集成。
Vite的默认类型适用于其Node.js API。
.jsx和.tsx文件也支持开箱即用。JSX转换也可以通过ESBuild处理，并且默认为React 16风格。此处跟踪了ESBuild中对React 17样式JSX的支持。
如果项目包含有效的PostCSS配置（例如postcss-load-config支持的任何格式postcss.config.js），它将自动应用于所有导入的CSS。
CSS预处理器, 由于Vite仅面向现代浏览器，因此建议将本机CSS变量与实现CSSWG草稿（例如postcss-nesting）并编写符合未来标准的普通CSS的PostCSS插件一起使用。
JSON文件可以直接导入-还支持命名导入.
Vite支持通过特殊功能从文件系统导入多个模块：import.meta.glob
构建优化 (下面列出的功能会在构建过程中自动应用)
异步块加载优化
CSS代码分割
预载指令生成
异步块加载优化

-- 以上来自 vitejs.dev 官网

Vue3 真香

7 个月前, 荣幸地宣布 Vue.js 3.0“One Piece”的正式发布。这个框架的新的主要版本提供了改进的性能、更小的捆绑大小、更好的 TypeScript 集成、用于处理大规模用例的新 API，以及为框架未来的长期迭代奠定了坚实的基础。

Vue 3 与 Vue 2 相比，在捆绑大小 (tree-shaking 时减少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和内存使用 (少了 54%) 方面都有显著的性能提升。

学习任何新技术前, 都建议通读一下该技术的官方文档 !

https://vue3js.cn/docs/zh/api/

Vue 2 -> Vue3 的变化

创建 Vue 的方式从 new Vue() 变为 -> Compostition api createApp(App)
将 Options Api 变为 -> hook 式的 Compostition api or Reactive api
beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered

只允许setup函数中书写 import {watch, onMounted, computed ...} from 'vue' (Compostition api)
vue2 要迁移vue3 所需的改动, 还是挺多的.

看一眼 Vue3-Demo

Demo 是上一步Vitejs/App生成的, 我们看看Vue3有何不同!

<template><h1>{{ msg }}</h1><p>Recommended IDE setup:<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>+<ahref="https://marketplace.visualstudio.com/items?itemName=octref.vetur"target="_blank">Vetur</a>or<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>(if using<code>&lt;script setup&gt;</code>)</p><p>See <code>README.md</code> for more information.</p><p><a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a> |<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a></p><button @click="goTodoList">go todo list </button><button @click="count++">count is: {{ count }}</button><p>Edit<code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template><script lang="ts">
import { ref, defineComponent } from 'vue'export default defineComponent({name: 'HelloWorld',props: {msg: {type: String,required: true}},setup: () => {const count = ref(0)return { count }}
})
</script><style scoped>
a {color: #42b983;
}label {margin: 0 0.5em;font-weight: bold;
}code {background-color: #eee;padding: 2px 4px;border-radius: 4px;color: #304455;
}
</style>

Less 真爽

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

https://less.bootcss.com/#

Less 比 Css 强在哪?

变量（Variables）

@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }

混合（Mixins）

#menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }

嵌套（Nesting）

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }

@规则嵌套和冒泡

.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { width: 800px; } }

运算（Operations）
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位 @conversion-1: 5cm + 10mm; // 结果是 6cm @conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 结果是 4px // example with variables @base: 5%; @filler: @base * 2; // 结果是 10% @other: @base + @filler; // 结果是 15%

calc() 特例
为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2; width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))

导入（Importing）

@import "library"; // library.less @import "typo.css";

改造Css 成为 Less

// 安装less依赖 yarn add less less-loader --dev

给模板代码外层增加div 标签

<template> <div> ... </div> </template> <style lang="less" > @label-margin: 0 0.5em; @code-padding: 2px 4px; @border: 4px; #div { a { color: #42b983; } label { margin: @label-margin; font-weight: bold; } code { background-color: #eee; padding: @code-padding; border-radius: @border; color: #304455; } } </style>

相比以前并没有减少代码. 但是增加巨多可扩展性, 遇到复杂的Css代码可以轻松很多.

取长补短真好

看了昔日的网页三剑客的升级版本后, 是不是发现前端变化很是很多呢 ? 如果我们 Java程序员能在写安卓,或者桌面端样式的时候用到 Less 的库, 是不是也挺爽呢? Vue3的Virtual DOM优化, 是否能应用到Java客户端的MVVM更新呢? Vite 的按需加载特性, 是否能被 devtools , JRebel 借鉴呢? 未来已来, 那有什么岁月静好, 还不是我们伟大的造轮子程序员负重前行! 开源让世界更美好, 感谢Linux, 感谢尤大 !