创建组件

分类	Composition API（Vue3）	Options API（Vue3）	Options API（Vue2）
创建	-	SFC v3.0	SFC v2.0
-	-	-	functional v2.5 functional v2.0
-	defineComponent() v3.0	-	new Vue() v2.0 Vue.extend() v2.0
注册	app.component() v3.0	-	Vue.component() v2.0 components v2.0
懒加载	defineAsyncComponent() v3.0	-	import() v2.0/ES2020
\-加载状态	defineAsyncComponent() v3.0	-	loading v2.3
\-回退方案	<Suspense>	-	-
\-动态组件	<component> v3.0	-	<component> v2.0
性能优化	<KeepAlive> v3.0	-	<keep-alive> v2.0
\-记忆渲染结果	-	v-memo v3.2	-
\-渲染一次	-	v-once v3.0	v-once v2.0

大纲

• 组件
  • 创建
    • SFC组件
    • 函数式组件
  • 注册
    • 全局注册
    • 局部注册
  • 加载
    • 懒加载组件
      • 动态加载
    • 回退方案（加载状态）
    • 动态组件
      • <component> / :is
  • 性能优化
    • 缓存不活动的组件实例
      • <KeepAlive>
      • <keep-alive>
    • 记忆渲染结果
      • v-memo
      • v-once
• 调试

创建

SFC 组件

函数式组件

• functional

无状态（没有响应式数据）、无实例（没有 this 上下文）。

因为函数式组件只是函数，所以渲染开销也低很多。

加载组件

异步组件

动态组件

性能优化

缓存不活动的组件实例

记忆渲染结果

创建视图

src/views/HomeView.vue

Vue3

// 视图脚本
<script lang="ts">
</script>

// 视图模板
<template>
  <main>
    <div>Home View</div>
  </main>
</template>

// 视图样式
<style></style>

Vue2

// 视图脚本
<script lang="ts">
</script>

// 视图模板
<template>
  <main>
    <div>Home View</div>
  </main>
</template>

// 视图样式
<style></style>

创建路由配置

src/router/index.ts

Vue3

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }
  ]
})

export default router

Vue2

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }
  ]
})

export default router

创建导航菜单

创建 Vue 应用 App 组件（全局布局组件）：src/App.vue

Vue3

// 脚本
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router' 
</script>

// 模板
<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
    </nav>
  </header>

  // 视图容器
  <RouterView />
</template>

// 样式
<style></style>

Vue2

// 脚本
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router' 
</script>

// 模板
<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
    </nav>
  </header>

  // 视图容器
  <RouterView />
</template>

// 样式
<style></style>

访问 / 即可查看页面（首页）内容。