vue.js

《vue 2 升级vue3 父组件子组件传值: value 和 v-model当你在一个原生 <input> 上使用 v-model 时，Vue 会将其展开为以下代码：html预览

Cursor配置MasterGo MCP：一键读取设计稿生成高还原度前端代码在传统的前端开发流程中，"从设计到代码"往往是最耗时的环节。开发者需要反复在设计工具和编辑器之间切换，手动测量间距、提取颜色值、计算布局比例。即便如此，最终的样式还原度也难以保证。随着 Cursor 引入了 MCP（Model Context Protocol）协议，MasterGo 官方推出的 Magic MCP 服务彻底打破了这一壁垒。它允许 Cursor AI 直接访问设计稿的底层 DSL 数据，这意味着 AI 不再是"看图说话"，而是直接读取精确的设计规范，实现 99% 以上的样式还原。

睡不着先生

如何设计一个真正可扩展的表单生成器？🧠 你写过多少次 CRUD 表单？登录表单、搜索表单、配置表单、后台管理表单…… 有没有想过：为什么不抽象成一套“表单引擎”？

别再用 scoped 了！Vue 项目中真正安全的 CSS 封装方案，第 3 种连尤雨溪都在用上周，设计师跑来问我：“为什么这个按钮在 A 页面是蓝色，在 B 页面变成紫色了？”我一查代码，发现两个组件都写了：

Pinia状态管理原理：从响应式核心到源码实现在前面的文章中，我们学习了 Vue Router 与响应式系统的集成。今天，我们将探索 Pinia，这是 Vue 官方推荐的状态管理库。Pinia 充分利用 Vue3 的响应式系统，提供了简单、类型安全的状态管理方案。理解它的实现原理，将帮助我们更好地组织应用状态，写出更可维护的代码。

KeepAlive：组件缓存实现深度解析在前面的文章中，我们学习了 Suspense 如何处理异步组件加载。今天，我们将探索Vue3中另一个强大的特性：KeepAlive。它允许我们在组件切换时缓存组件实例，避免重复渲染，极大地提升了用户体验和性能。理解它的实现原理，将帮助我们更好地处理需要保持状态的组件。

Vue Router与响应式系统的集成在前面的文章中，我们深入学习了 Vue3 的响应式系统、组件渲染、生命周期等核心机制。今天，我们将探索 Vue Router 是如何与 Vue 的响应式系统无缝集成的。理解路由的实现原理，将帮助我们更好地处理页面导航、路由守卫等复杂场景。

《VuReact：下一代 Vue 3 -> React 智能编译工具，支持 SFC 与增量迁移》一直以来，Vue 到 React 的代码转换，要么靠手写重做，要么靠半成品的工具跑一半卡住。我做 VuReact 就是想验证一件事：Vue 到 React 能不能在工程层面真正互通？不是语法高亮，不是简单替换，而是从 script setup 到 JSX、从响应式到生命周期、从样式作用域到类型定义——能不能完整编译过去。下面是它的快速上手，你看完就知道我说的“完整验证”是什么意思。

vue 2 升级vue3 : ref 和 v-model 命名为同名在 Vue 2 中之所以能“侥幸”运行，是因为 Vue 2 的响应式机制（Object.defineProperty）和 $ refs 的存储机制是隔离的。但在 Vue 3 中，这一“潜规则”被彻底打破。这不仅仅是命名习惯的问题，而是触及了 Vue 3 响应式原理和组件实例结构的根本性变革

告别 !important：现代 CSS 层叠控制指南，90% 的样式冲突其实不用它也能解上周 Code Review，我看到同事在修复一个“按钮颜色不对”的 bug，最后加了一行：我问他：“为什么非要用 !important？” 他苦笑：“试了所有选择器，优先级都不够……再不加，明天上线就翻车。”

Vue 3 性能优化的 5 个隐藏技巧，第 4 个连老手都未必知道上周，我们上线了一个数据看板页面，本地跑得飞快，一上生产——滚动卡成 PPT。Profiler 一抓，发现：

洋洋技术笔记

计算属性与侦听器计算属性和侦听器是Vue响应式系统的左膀右臂。一个负责"算"，一个负责"看"，配合默契。在前面的文章中，我们已经初步接触了计算属性和侦听器。今天，让我们深入探索这两个核心特性，掌握它们的精髓。

拿来就用！Vue3+Cesium 飞入效果封装，3D大屏多场景直接复用最近有点儿事儿，之前的大屏项目拖了一段时间，现在打算继续开发。原本以为用熟悉的Cesium能快速搞定，没想到还是踩了几个坑，整理出来和大家分享，避免后续有人走同样的弯路。

Electron 淘汰！新的桌面端框架更强大、更轻量化桌面应用开发中，Electron 与 Tauri 的“两难”困境长期困扰开发者：Electron 生态成熟、上手简单（会网页开发即可），但打包体积臃肿（Hello World 应用超100MB）、运行耗内存；Tauri 轻量安全（调用系统原生 WebView），但需掌握 Rust 语言，对纯前端开发者门槛较高。

不会敲代码1

前端组件化样式隔离实战：React CSS Modules、styled-components 与 Vue scoped 对比在现代前端开发中，组件化已成为构建用户界面的主流方式。我们将页面拆分为独立、可复用的组件，每个组件管理自己的 HTML、CSS 和 JavaScript。然而，CSS 的设计初衷是全局作用域的 —— 样式一旦定义，就会影响整个页面，这给组件化带来了严峻挑战。

Vue3 嵌套路由 KeepAlive：动态缓存与反向配置方案在电商系统中，用户的操作路径往往是这样的：进入商品列表页 → 进行筛选、排序、分页 → 点击进入商品详情页 → 查看后返回列表页。

Vue状态管理扫盲篇：如何设计一个合理的全局状态树 | 用户、权限、字典、布局配置同学们好，我是 Eugene（尤金），一个拥有多年中后台开发经验的前端工程师~（Eugene 发音很简单，/juːˈdʒiːn/，大家怎么顺口怎么叫就好）

阿懂在掘金

defineModel 是进步还是边界陷阱？双数据源组件的选择逻辑defineModel 是 Vue 3.4 引入的语法糖。它看起来只是让 v-model 更优雅：但它背后做的事情，远不止简单的语法糖，甚至改变了组件的状态哲学。

要闹哪样？又出现了一款新的格式化插件，尤雨溪力荐，速度提升了惊人的45倍！前两天刚刚讨论完Vize(参考这篇文章: # 前端圈子又出新东西了，大幅提升解析速度。尤雨溪推荐，但我不太推荐)，这两天发现前端又出现新工具了，而且是尤大力荐的，我得到这个消息还算是比较晚的了。

React Context 详解：从入门到性能优化本文适合熟悉 Vue 但刚开始学习 React 的开发者，通过 Vue 的 provide/inject 对比来理解 React Context。