前言近期有一个需求，Java 后端要根据规则实时推送一些数据到前端，实现前端数据的实时更新。后端向前端推送消息，就需要长连接，首先想到的就是使用 WebSocket，但是原生的 WebSocket 又有一些局限性，可能不是一个最佳的解决方案，经过阶段调研，最终选择使用 Socket.D。Socket.D 简介Socket.D 官网：https://socketd.noear.org/Sokcet.D 是基于事件和语义消息流的网络应用协议。事件：事件即路径、指令，每个消息都可事件路由，就像 MVC 中的请求路径，方便不同的业务安排不同的处理。语义：语义即元信息标注，通过元信息进行语义描述，即对消息添加描述性的额外信息的操作，就像请求头，可以给消息数据标注内容类型，方便接收端做序列化等工作。消息流：传输来回相关的消息会串成一个有关联的流，这一个流是通过 sid（streamId）为来回的相关消息建立起关联性，就算某一端重启，只要 sid 还存在（比如被持久化保存下来了），仍可实现流答复。Sokcet.D 的其他特点：语言无关：使用二进制输传数据，适配支持 tcp、ws、udp、kcp 等，

初识 Vue 3Vue 3 简介Vue 团队在 2020 年 9 月 18 日发布了 Vue 3.0 版本，代号海贼王,现在市面上一些主流的组件库都已经发布了支持 Vue 3，其他生态也在不断地完善中。Vue 3 的优势：更快的渲染速度：Vue 3 重写了 diff 算法，使用了新的虚拟 DOM 实现，可以更快地渲染页面，减少页面的闪烁和卡顿。更好的 TypeScript 支持：Vue 3 引入了全面的 TypeScript 支持，包括类型检查和代码提示。更好的响应式系统：Vue 3 的响应式系统比 Vue 2 更加灵活和高效，可以更好地处理嵌套数据和响应式数组。更好的组件封装：Vue 3 引入了 Composition API（组合式 API），它可以更好地封装组件的逻辑和状态，并使代码更具可读性和可维护性。更少的包大小：Vue 3 的核心库比 Vue 2 小得多，这意味着更快的下载速度和更少的资源占用。更好的 Tree-Shaking：Vue 3 的模块系统使用 ES 模块，可以更好地支持 Tree-Shaking，当引入一个模块的时候，不引入这个模块的所有代码，只引入我需要的代码

Vue CLI 静态资源管理路径引用规则在 Vue CLI 中，路径引用的场景：如果 URL 是一个绝对路径，它将会被保留不变，可以引用 public 文件夹下的资源。如果 URL 以 . 开头，它会被认为是相对模块请求，根据文档目录结构进行解析。如果 URL 以 \~ 开头，其后的任何内容都会认为是模块请求，可以引用 node\_modules 文件夹下的资源。如果 URL 以 @ 开头，它也会作为一个模块请求被解析，Vue CLI 默认别名 @ 表示 src 文件夹。处理静态资源静态资源可以通过两种方式进行处理：放置在 src/assets 文件夹下的静态资源通过相对路径被引用，这类引用会被 webpack 处理。放置在 public 文件夹下通过绝对路径被引用，这类资源将会直接被拷贝，而不会经过 webpack 的处理。示例：加载图片根组件（App.vue）：<template> <div> <!-- 引用public文件夹下的avatar.png --> <img src="/avata

Vue Router路由概述前端路由是一种在单页应用（SPA）中管理页面导航的技术。其主要作用是根据用户的操作（如点击链接）动态地加载和显示不同的页面内容，而无需重新加载整个页面。Vue 中的路由属于前端路由，它有两种常见的模式，分别是 Hash 模式和 History 模式。Hash 模式的前端路由通过 URL 中从 # 号开始的部分实现不同组件之间的切换，# 号表示 Hash 符，# 号后面的值称为 Hash 值，该值将用于进行路由匹配。History 模式的 URL 地址与后端路由的 URL 地址的风格一致，可以通过 URL 地址中的路径进行路由匹配。Vue Router 初体验Vue Router 是 Vue 官方推出的路由管理器，主要用于管理 URL，实现 URL 和组件的对应，通过 URL 进行组件之间的切换。Vue Router 3.x 文档：https://v3.router.vuejs.org/zh/在 Vue CLI 项目中使用 Vue Router，推荐在 GUI 中为项目安装 @vue/cli-plugin-router 插件。在创建 Vue CLI 项目时，也

Vue CLIVue CLI 概述Vue CLI 是一个官方提供的基于 Vue.js 进行快速开发的脚手架工具，用于快速搭建基于 Vue.js 的前端项目。Vue CLI 文档：https://cli.vuejs.org/Vue CLI 的特点：内置了 webpack 打包工具，可以快速构建项目的基本结构和配置。支持自定义配置，包括 webpack 配置、开发环境和生产环境配置、环境变量等。支持插件机制，可以集成其他框架和库，提高开发效率。支持命令行工具，可以快速生成组件、页面、路由等。使用 Vue CLI，需要全局安装 @vue/cli。示例：全局安装 @vue/cli终端执行：‍# 安装vue-cli npm install @vue/cli -g # 查看vue-cli版本信息 vue -V 示例效果：使用 Vue CLI 创建项目Vue CLI 引入了图形用户界面（GUI）来创建和管理项目。通过 Vue CLI GUI，可以快速创建 Vue CLI 项目，快速地为项目安装一些插件和依赖。示例：使用 GUI 创建项目终端执行：# 运行GUI vue ui示例效果：在浏览器中打开

过渡和动画基础过渡和动画概述Vue 在插入、更新或者移除 DOM 时，提供了多种过渡效果。过渡，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。Vue 提供了内置的过渡封装组件 transition，可以结合 CSS 动画 @keyframes 实现动画效果。transition 组件Vue 提供了内置的过渡封装组件，即 transition 组件。transition 组件的基本用法：<!-- 过渡类名前缀：替换过渡类的v-前缀 --> <transition name="过渡类名前缀"> <!-- 需要添加过渡的元素 --> <!-- 组件在同一时间内只能有一个元素显示 --> <div></div> </transition>Vue 为 transition 标签内部的元素提供了 3 个进入过渡的类和 3 个离开过渡的类。transition 组件的基本过渡类：过渡状态过渡类型描述进入（enter）v-enter进入过渡的开始状态，作用于开始

全局 APIVue.directiveVue 中有很多内置指令，除了内置指令外还可以根据需求使用 Vue.directive 注册自定义指令。Vue.directive 的基本用法：<div id="app"> <input type="text" v-指令名称="指令的值"> </div> <script> // Vue.directive()：自定义指令 // 参数1：自定义指令名称 // 参数2：指令的配置对象 Vue.directive('name', { // inserted：指令生命周期钩子函数，元素第一次插入页面中时触发 // el：使用指令的元素本身 // binding：指令的配置信息 // binding.value：指令的值 inserted (el, binding) { // 指令操作