关于vue3:vue3个人心得概论

Vue 的两个外围性能

申明式渲染 ：Vue 基于规范 HTML 拓展了一套模板语法，使得咱们能够申明式地形容最终输入的 HTML 和 JavaScript 状态之间的关系。（import）
响应性：Vue 会主动跟踪 JavaScript 状态变动并在扭转产生时响应式地更新 DOM

Vue 的一大劣势——渐进式框架

Vue 活性和“能够被逐渐集成”这个特点。依据需要场景，能够用不同的形式应用 Vue：

• 无需构建步骤，渐进式加强动态的 HTML（这个能够了解）
• 在任何页面中作为 Web Components 嵌入（这个能够了解）
• 单页利用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 动态站点生成 (SSG)
• 开发桌面端、挪动端、WebGL，甚至是命令行终端中的界面

Vue 的单文件组件

单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和款式 (CSS) 封装在同一个文件里（在任何页面中作为 Web Components 嵌入）

<script setup>
import {ref} from 'vue'                                                      
defineProps({msg: String})                                                 
const count = ref(0) 
 </script>                                      
<template>
<p class="greeting">{{count}}</p>
<p class="greeting">{{msg}}</p>
</template>
<style scoped>
.greeting {color: red;}
</style> 

Vue 的组件格调

• 选项式 API (Options API)
  用选项词（例如 data、methods 和 mounted）来形容和分类组件的逻辑。
• 组合式 API (Composition API)
  用导入的 API 函数（例如 import {ref, onMounted}）来形容组件逻辑，雷同的逻辑可随便分布
• “选项式 API”与“组合式 API”只是写法格调的不同，作用是一样的

组合式 API

组合式 API 是一系列 API 的汇合，使咱们能够应用函数而不是申明选项的形式书写 Vue 组件。它涵盖了以下方面的 API：

• 响应式 API：例如 ref() 和 reactive()，使咱们能够间接创立响应式状态、计算属性和侦听器。
• 生命周期钩子：例如 onMounted() 和 onUnmounted()，使咱们能够在组件各个生命周期阶段增加逻辑。
• 依赖注入：例如 provide() 和 inject()，使咱们能够在应用响应式 API 时，利用 Vue 的依赖注入零碎。

组合式 API 基本上都会配合 <script setup> 语法在单文件组件中应用

组合式 API 的劣势

• 更好的逻辑复用
  组合式 API 最根本的劣势是它使咱们可能通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中咱们次要的逻辑复用机制是 mixins（混用），而组合式 API 解决了 mixins 的所有缺点。
• 更灵便的代码组织
  选项式会把解决雷同逻辑关注点的代码强制拆分在了不同的选项中，组合式 API 能够把同一个逻辑关注点相干的代码被归为了一组，无需为了一个逻辑关注点在不同的选项块间来回滚动切换。此外，能够很轻松地将这一组代码移动到一个内部文件中，不再须要为了形象而从新组织代码，大大降低了重构老本，这在长期保护的大型项目中十分要害。
• 更好的类型推导
  组合式 API 次要利用根本的变量和函数，能够享受到残缺的类型推导，不须要书写太多类型标注。大多数时候，用 TypeScript 书写的组合式 API 代码和用 JavaScript 写都差不太多！这也让许多纯 JavaScript 用户也能从 IDE 中享受到局部类型推导性能。
• 更小的生产包体积
  搭配 <script setup> 应用组合式 API 比等价状况下的选项式 API 更高效，对代码压缩也更敌对。