<aside> <img src="https://d2gbo5uoddvg5.cloudfront.net/images/modules/vue.gif" alt="https://d2gbo5uoddvg5.cloudfront.net/images/modules/vue.gif" width="40px" /> Vue 3

<aside> 🔗

Vue RFCs

</aside>

• Vue 3

  

  • 工具链
    • Vue SFC Playground
    • StackBlitz 中的 Vue + Vite

• 核心插件

  • https://github.com/vuejs/pinia - Pinia - 替代vuex的轻量级状态管理库

    

    • https://github.com/vuejs/vuex - Vuex 4

      

  • https://github.com/vuejs/router - Vue Router 4

    

  • https://github.com/vitejs/vite - Vite

    

  • https://github.com/vuejs/babel-plugin-jsx - JSX for Vue 3

    • 渲染函数 & JSX | Vue.js
    • Vue3中使用JSX简明语法

    Vue 3中JSX/TSX最佳实践

• https://nuxt.com/

  • https://ui.nuxt.com/

• Vue 写原生

• Vue 3 State Management CheatSheet

• https://github.com/vueuse/vueuse - VueUse: 组合式 API 工具库 全能工具箱

• https://github.com/InhiblabCore/vue-hooks-plus - VueHook Plus: 针对 Vue3 的 VueUse 补充 请求一条龙

• https://github.com/alovajs/alova - https://alova.js.org/zh-CN/

• https://github.com/tanstack/query - TanStack Query: 异步数据的状态管理

• UI

• UI Framework

• Awesome Vue

**其他 https://www.vue-plugins.org/**

• https://github.com/vuejs/composition-api - Composition API plugin for Vue 2
• unplugin-vue-components 自动按需引入组件
• https://github.com/posva/unplugin-vue-router - Vue3 构建时自动生成路由配置
• https://github.com/webfansplz/vite-plugin-vue-mcp - 通过启用 Model Context Protocol (MCP) 服务器，帮助模型更好地理解 Vue 应用程序
• Use Vue Composition API globally
• TypeScript
• eslint rules
• Building an Electron App with VueJS and Vite
• Handlebars.hbs
• Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
  • Windi CSS / 为 VS Code 提供的 Windi CSS Intellisense
• TypeScript Props - @element-plus/utils/props
• https://github.com/cuixiaorui/mini-vue - 最简 vue3 模型，用于深入学习 vue3
• https://github.com/vue-vine/vue-vine - Vue Vine 在单个文件中编写多个 Vue 组件的解决方案

<aside> 🌟 业务逻辑和用到的数据内聚到一起才更容易维护，这叫做“逻辑关注点分离”。

我们内聚的不应该技术类型，而是业务逻辑，因为触发代码变更的往往是业务需求，因此把相同变更理由的代码放在一起，这才不会导致散弹式修改。

这也是单一职责的指导思想，这样可以提升可维护性*（《架构整洁之道》书中提到：对于大多数应用，可维护性比可重用性更加重要）*，而且不再有反复横跳现象。

• Composition API 介绍

• Composables (组合式函数) : 利用组合式 API 来封装和复用**有状态逻辑**的函数。

  无状态逻辑：例如 utils 它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的 lodash 或是 date-fns。

  const useHook = (需要的参数) => 组件需要的状态数据和行为逻辑
  

  • 只有在调用到其他 Hook 时才将函数命名为 useXxx。 Hook 只能在 <script setup> 或 setup() 顶层同步调用。
  • 使用 onSomething 命名代表事件的 props，使用 handleSomething 命名处理这些事件的函数。
  • React 关注点分离 实践
  • 代码混乱怎么办
  • Vue 3中的可合成组件与无渲染组件
  • Hooks 时代，如何写出高质量的 react 和 vue 组件？
  • 浅谈：为啥vue和react都选择了Hooks🏂？
  • Vue3 用了组合式 (Composition) API 后代码变得更乱了，怎么办？ </aside>

<aside> 🚨 注意事项

</aside>

<aside> 🚨 在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中更改这个对象或数组将会影响到父组件的状态。

</aside>

<aside> 🚨 getCurrentInstance 只能在 setup 或生命周期钩子中调用。

</aside>

<aside> ⚠️ **不**推荐在组件上使用自定义指令，因为自定义指令主要还是针对dom来的

</aside>

<aside> 💡 Attribute 继承

</aside>

<aside> 💡 <Suspense :timeout="0">

</aside>

<aside> ✨ 调试技巧

</aside>

<aside> ✨ 开发技巧

</aside>

<aside> ❓ 在Vue中，template和JSX到底哪个好？

</aside>

</aside>

• Vue 2

<aside> 📦 Vue 资源

</aside>

<aside> 📢 Vue 社区

</aside>

<aside> 📰 新闻

</aside>

Atoms 原子 > Molecules 分子 > Organisms 生物体 > Templates 模板 > Pages 页面