WebSocket聊天室实战（基于Socket.IO） 本文介绍了使用Socket.IO库构建WebSocket聊天室的完整流程。首先阐述了选择Socket.IO的原因，相比原生WebSocket API，它能更方便处理数据类型和用户区分问题。然后详细展示了服务器端和客户端(Vue3)的实现步骤： 服务器端： 初始化项目并安装Socket.IO 创建聊天服务器，实现用户连接、消息广播、在线用户管理

Vue3响应式基础：本文介绍了Vue3中声明响应式状态的几种方式。直接修改变量不会触发模板更新，必须使用ref()函数来创建响应式引用。ref()可以包装任何类型数据，通过.value访问值，在模板中自动解包。文章详细展示了ref处理基础类型、对象和数组的示例，并说明ref具有深层响应性。同时介绍了shallowRef()用于放弃深层响应式以优化性能的情况，以及DOM更新的异步特性（"n

本文介绍了Vue3中常用的响应式API，主要包括： ref相关API：toRef用于将响应式对象属性转为ref；toRefs将整个响应式对象转为ref对象；unref返回ref内部值或参数本身。 readonly创建只读代理对象，防止数据被修改。 判断类API：isRef/isReactive检测响应式类型；isProxy检测代理对象。 toValue作为unref升级版，更灵活支持函数返回值。

本文介绍了Vue3中计算属性的核心概念和使用方法。首先分析了普通模板表达式的缺陷：只能写简单表达式、不够直观、重复使用时代码臃肿。通过计算属性可以完美解决这些问题，支持复杂运算、命名清晰、响应式更新。文章还介绍了可写计算属性的使用（但不推荐）以及最佳实践：避免在getter中产生副作用、不直接修改计算属性值。最后对比了计算属性和方法的区别：计算属性基于响应式数据变化重新计算并缓存结果，而方法在每次

本文介绍了Vue3中Class与Style绑定的多种方式。主要包含：1）绑定HTML class的三种对象方式（直接用法、对象变量、计算属性）；2）绑定数组的三种形式（直接修改、三目运算、嵌套对象）；3）组件上使用class的两种情况（单根自动合并/多根需指定）。每种方式都通过代码示例演示了具体用法和效果，并给出了不同场景下的使用建议。文章特别强调了在复杂判断时推荐使用计算属性，避免代码冗余。

本文介绍了Vue3中的条件渲染功能，主要包括v-if、v-else、v-else-if和v-show指令的使用方法及区别。v-if系列指令用于条件性渲染元素，而v-show通过控制CSS的display属性来切换元素显示。文章还对比了v-if和v-show的性能特点，建议根据状态切换频率选择合适的指令。最后，针对v-if和v-for同时使用的情况，推荐使用template标签包裹v-for以避免报

Vue3 列表渲染主要使用 v-for 指令，支持数组和对象遍历。数组遍历时可获取元素(item)和索引(index)，支持解构操作；对象遍历时可获取值(value)、键(key)和索引(index)。嵌套 v-for 可访问父级作用域变量，建议使用唯一 key 优化渲染性能。template 标签上使用 v-for 不会渲染自身，组件上使用需通过 props 传递数据。

Vue3表单输入绑定指南：使用v-model简化表单处理 本文介绍了Vue3中通过v-model实现表单输入绑定的方法。v-model语法糖简化了手动连接值绑定和事件监听器的过程，可应用于多种表单元素： 文本输入框（input/textarea）：绑定value属性，监听input事件 复选框（checkbox）：单一复选框绑定布尔值，多复选框绑定数组 单选框（radio）：绑定选中项的value

本文介绍了Vue3中侦听器watch的基本使用和细节。watch用于在响应式数据变化时执行副作用操作，支持侦听ref、计算属性、reactive对象、getter函数和数组等多种数据源。文章通过示例展示了不同数据源的侦听方式，特别指出侦听reactive对象属性时需使用getter函数，并解释了reactive对象的深层侦听特性。同时对比了watch与计算属性的区别，强调了watch适合执行异步操

本文介绍了一个基于Vue3的待办事项应用实现，包含添加、编辑、删除和状态管理功能。主要技术点包括：使用v-model绑定输入框、响应式数组存储待办列表、计算属性过滤不同状态事项、watchEffect实现本地存储持久化。功能包括：Ctrl+Enter添加事项、双击编辑、状态切换（全部/未完成/已完成）、剩余数量统计、二次确认删除等。通过这个实战练习，综合应用了Vue3的模板语法、响应式数据、计算属