• Contents

script-setup + ref-sugar + ts

Options API vs Composition API ?

在 Options API 和 Composition API 之间无须纠结，Composition API 在逻辑复用、类型推导、可测性等方面均占优势，无脑选择 Composition API 即可

JSX vs Template ?

对于 JSX 和 Template，在大部分场景下是推荐使用 Template 的（尤其是在业务场景下）。Vue 3 基于 Template 分析做了很多优化，并对使用者是透明的，编译器默默地完成了所有的优化操作。

而使用 JSX 的话，则需要手动进行一些优化操作，比如提取静态的 JSX 片段到 render 函数外部。例如在 Vue 组件库中，组件库代码比业务代码具有更强的动态性，使用 JSX 可以很灵活地控制动态 DOM 片段。

const renderContent = () => {
  const Content = [
    <div class="foo"> Foo DOM...</div>,
    <div class="bar"> Bar DOM...</div>,
  ]
  if (props.reverse) {
    Content.reverse()
  }
  return <div>{Content} </div>
}

<template>
  <template v-if="reverse">
    <div class="bar">Bar DOM...</div>
    <div class="foo">Foo DOM...</div>
  </template>
  <template v-else>
    <div class="foo">Foo DOM...</div>
    <div class="bar">Bar DOM...</div>
  </template>
</template>

Name Style Guide ?

• camelCase
• PascalCase
• kebab-case
• snake_case

HTML 标签（Tags）和属性名（Attribute names）不区分大小写。因此浏览器将任何大写字符解析为小写字符。所以在使用 DOM Template 时，PascalCase 组件名称和 camelCased Props名称或 v-on 事件名称都需要使用它们的 kebab-case 等价物

Vue 单文件组件（即 *.vue，缩写为 SFC）

File

PascalCase

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue

import SearchButtonClear from '../components/SearchButtonClear.vue'
<SearchButtonClear />