vue.js 3中全局组件和局部组件的区别

以下内容来自AI

注册方式不同

全局组件

// 全局注册
Vue.component('my-component', {
  // 选项
})

// 或使用组件选项对象
Vue.component('my-button', {
  template: '<button>全局按钮</button>'
})

局部组件

// 局部注册
const ComponentA = {
  template: '<div>局部组件A</div>'
}

const ComponentB = {
  template: '<div>局部组件B</div>'
}

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

作用域不同

• 全局组件：在任何 Vue 实例/组件中都可以使用

• 局部组件：只能在注册它的 Vue 实例/组件中使用

使用场景

适合全局注册的情况：

• 通用基础组件（按钮、输入框、弹窗等）

• 在整个应用中频繁使用的组件

• 第三方库组件

适合局部注册的情况：

• 特定页面/功能专用的组件

• 使用频率不高的组件

• 不希望污染全局命名空间的组件

性能影响

• 全局组件：在应用初始化时就会注册，增加初始包体积

• 局部组件：可以按需注册，有利于代码分割和懒加载