<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
  • GoGoCode Vue2 迁移 Vue3 指南

• 核心插件

  • 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最佳实践

• 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/tanstack/query - TanStack Query: 异步数据的状态管理

• UI

• Awesome Vue

其他

• 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
• Nuxt 3 - The Hybrid Vue Framework (nuxtjs.org)
• 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> 🚨 注意事项

• JavaScript 表达式 → 受限的全局变量列表
• 动画时长 → 0.25s
• 缓动效果
• FLIP技术让动画更流畅
• SSR → 14kb </aside>

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

与 props 不同，attrs 和 slots 的 property 是非响应式的。如果你打算根据 attrs 或 slots 的更改应用副作用，那么应该在 onBeforeUpdate 生命周期钩子中执行此操作。

Setup 的调用发生在 data property、computed property 或 methods 被解析之前。

组织 state 最重要的一条原则是保持它 DRY（不要自我重复）。

</aside>

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

</aside>

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

</aside>

<aside> 💡 Attribute 继承

• 当组件返回单个根节点时，非 prop 的 attribute 将自动添加到根节点的 attribute 中 </aside>

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

允许将等待过程提升到组件树中处理，而不是在单个组件中。

• 子孙组件中包含 异步组件
• 另一个触发 fallback 的方式是让后代组件从 setup 函数中返回一个 Promise </aside>

<aside> ✨ 调试技巧

• Enable custom formatters - 更直观查看 ref 的 console 输出
• jsx 如何使用 devtools 调试（devtools 只能查看 setup 中 return 的内容） </aside>

<aside> ✨ 开发技巧

• Using Vue from a CDN
• VNode Hooks - https://juejin.cn/post/7174568239903539236#heading-0
• Debugging Hooks - https://juejin.cn/post/7174568239903539236#heading-1
• 从子组件暴露插槽 - 第三方组件的插槽 - https://juejin.cn/post/7174568239903539236#heading-2
• 多个根节点的子组件不能从父范围的样式设置样式 - https://juejin.cn/post/7174568239903539236#heading-3
• Vue3 跨组件渲染模板
• 全局toast组件开发
• 给全局组件添加类型
• Vue3 TypeScript 使用技巧
• 组件设计指南
• vue3 使用 h 进行动态渲染会损失性能吗 </aside>

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

</aside>

</aside>

• Vue 2

<aside> 📦 Vue 资源

</aside>

<aside> 📢 Vue 社区

</aside>

<aside> 📰 新闻

</aside>

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