Vue 2 与 Vue 3 组件开发区别-CSDN博客

本文链接：https://blog.csdn.net/2302_79520453/article/details/147533914

vue2

全局组件创建

核心方法

Vue.component 方法介绍

Vue.component 用于注册全局组件

方法的参数和使用方式

Vue.component(id, [definition])

id (必填)：组件名称，遵循 kebab-case（推荐）或 PascalCase。

definition (可选)：组件配置对象或构造函数（通过 Vue.extend 生成）。若未提供，则返回已注册的组件。

直接传递配置对象（常用）

//main文件
// 引入 Vue
import Vue from 'vue';

// 直接传递配置对象
Vue.component('my-button', {
  template: '<button @click="count++">点击 {{ count }} 次</button>',
  data() {
    return { count: 0 };
  }
});

使用 Vue.extend 构造函数（较少用）

// 先通过 Vue.extend 创建构造器
const ButtonConstructor = Vue.extend({
  template: '<button @click="count++">点击 {{ count }} 次</button>',
  data() {
    return { count: 0 };
  }
});

// 再注册组件
Vue.component('my-button', ButtonConstructor);

关键区别：

语法差异：直接传递对象更简洁，Vue.extend 适合需要复用构造器的场景（如动态挂载组件）。

功能等价：两种方式注册的组件功能完全相同。

全局组件 vs 局部组件

全局组件（Vue.component 注册）

// 全局组件：任何 Vue 实例中都能使用
Vue.component('global-comp', {
  template: '<div>全局组件</div>'
});

new Vue({ el: '#app1' });
new Vue({ el: '#app2' }); // 两个实例都能使用 <global-comp>

局部组件（components 选项注册）

// 局部组件：仅在当前实例作用域内可用
new Vue({
  el: '#app',
  components: {
    'local-comp': {
      template: '<div>局部组件</div>'
    }
  }
});

// 另一个实例无法使用 <local-comp>
new Vue({ el: '#app2' }); // 报错：Unknown custom element

关键区别：

作用范围：全局组件可跨实例复用，局部组件仅在注册的实例内可用。

性能影响：全局组件会占用更多内存，非通用组件建议局部注册。

模板定义方式

字符串模板（直接编写）

Vue.component('template-string', {
  template: `
    <div class="wrapper">
      <span>字符串模板</span>
    </div>
  `
});

使用 x-template 模板（HTML 中定义）

<!-- 在 HTML 中定义模板 -->
<script type="text/x-template" id="x-template-demo">
  <div class="wrapper">
    <span>x-template 模板</span>
  </div>
</script>

<script>
Vue.component('x-template-demo', {
  template: '#x-template-demo'
});
</script>

单文件组件（.vue 文件，需构建工具）

// 父组件中使用
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

关键区别：

可维护性：单文件组件最清晰，适合复杂项目。

适用场景：简单组件可用字符串模板，x-template 适合分离 HTML 结构。

组件命名规范

用kebab-case 命名，html不区分大小写，大写上去直接小写也能用，同时不保证功能可以使用。

Vue 3

定义简单全局组件：挂载应用并使用全局组件

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <my-button></my-button>
    <demo-header title="Vue 3 组件"></demo-header>
  </div>

  <script>
    // 1. 创建应用实例
    const app = Vue.createApp({});

    // 2. 注册全局组件
    app.component('my-button', {
      template: `
        <button @click="count++" class="btn">
          点击次数: {{ count }}
        </button>
      `,
      data() {
        return { count: 0 };
      }
    });

    app.component('demo-header', {
      template: `
        <header style="border: 1px solid #ccc">
          <h1>{{ title }}</h1>
        </header>
      `,
      props: ['title']
    });

    // 3. 挂载应用
    app.mount('#app');
  </script>
</body>
</html>

步骤说明

创建应用实例：使用 createApp() 方法创建。

注册全局组件：通过 app.component() 方法。

挂载应用：调用 app.mount() 绑定到 DOM。

脚手架

创建全局组件（推荐）

<!-- src/components/GlobalButton.vue -->
<template>
  <button class="global-btn">
    <slot></slot>
  </button>
</template>

<style scoped>
.global-btn {
  padding: 8px 16px;
  background: #42b983;
}
</style>

全局注册（main.js）

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

// 导入全局组件
import GlobalButton from '@/components/GlobalButton.vue'

const app = createApp(App)

// 全局注册（驼峰式命名会自动转换短横线写法）
app.component('GlobalButton', GlobalButton)
// 或指定自定义名称
app.component('my-global-button', GlobalButton)

app.mount('#app')

全局使用（无需局部注册）

<!-- 任意子组件中直接使用 -->
<template>
  <GlobalButton>全局按钮</GlobalButton>
  <my-global-button>自定义名称按钮</my-global-button>
</template>

优缺点

优点：随处可用，适合高频组件（如UI库组件）
缺点：增加打包体积，依赖关系不直观

与 Vue 2 的关键差异

特性	Vue 2	Vue 3
全局组件注册	`Vue.component()`	`app.component()`
应用实例化	`new Vue()`	`createApp()`
作用范围	全局跨所有实例	仅限当前应用实例
挂载方式	`el` 选项或 `$mount()`	`app.mount()`

局部组件注册（推荐常规用法）

1. 创建局部组件

<!-- src/components/LocalCard.vue -->
<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <slot name="content"></slot>
  </div>
</template>

<script setup>
defineProps({
  title: String
})
</script>

2. 局部注册使用（选项式API）

<!-- src/views/HomeView.vue -->
<template>
  <LocalCard title="选项式示例">
    <template #content>
      <p>局部组件内容</p>
    </template>
  </LocalCard>
</template>

<script>
import LocalCard from '@/components/LocalCard.vue'

export default {
  components: {
    LocalCard // 注册后可在模板使用
  }
}
</script>

组合式API + `<script setup>` 写法

<!-- src/views/AboutView.vue -->
<template>
  <LocalCard title="组合式示例">
    <template #content>
      <p>自动注册的组件</p>
    </template>
  </LocalCard>
</template>

<script setup>
// 直接导入即可使用（Vue 3.2+）
import LocalCard from '@/components/LocalCard.vue'
</script>