【Vue 2】

 Vue的组件化

Vue的组件化开发是一种将复杂的业务拆分为一个个独立的、可复用的组件的开发方式。组件化开  发的核心思想是将页面拆分成多个组件，每个组件依赖的CSS、JS、模板、图片等资源放在一起开发和维护

什么是跟组件

在Vue中，根组件（Root Component）是应用程序的入口点，它是所有其他组件的父组件。根组件通常被挂载到DOM中的一个元素上，并且它包含了整个应用程序的模板、数据和逻辑

组件的注册

在Vue中，组件的注册主要有两种方式：全局注册和局部注册

全局注册：

全局注册使用Vue.component()方法，注册后的组件可以在任何Vue实例的模板中使用，无需再进行局部注册。全局注册通常用于一些基础组件，这些组件会在整个应用中被频繁使用，如按钮、输入框等

// 注册一个全局组件  
Vue.component('my-component', {  
  // 组件的选项  
  template: '<div>这是一个全局组件</div>'  
})  
  
// 在任何Vue实例的模板中都可以使用  
new Vue({  
  el: '#app',  
  template: '<my-component></my-component>'  
})

局部注册：

局部注册是在某个Vue实例的组件选项中注册组件，该组件只能在该实例以及其子组件中使用。局部注册可以提高组件的封装性，避免全局命名冲突，同时也可以优化应用性能，因为只有需要的组件才会被注册和加载

// 在某个Vue实例中注册一个局部组件  
new Vue({  
  el: '#app',  
  components: {  
    'my-component': {  
      template: '<div>这是一个局部组件</div>'  
    }  
  },  
  template: '<my-component></my-component>'  
})

何时使用全局注册和局部注册：

• 当一个组件需要在整个应用中被频繁使用时，适合使用全局注册。
• 当一个组件只在某个特定的Vue实例或子组件中使用时，适合使用局部注册。这样可以提高组件的封装性，避免全局命名冲突，同时也可以优化应用性能

在Vue中，组件的拆分思路主要基于以下几个方面：

• 单一职责原则：每个组件应该只做一件事情，并且做好它。如果一个组件开始承担过多的职责，那么它就应该被拆分成更小的组件。这样做有助于提高代码的可维护性和可重用性。
• 复用性：对于那些可能在多个地方重复使用的组件，应该考虑将其拆分为独立的可复用组件。这可以通过将共享的功能或布局提取到单独的组件中来实现。
• 层级关系：根据组件之间的层级关系进行拆分。父组件应该包含子组件，并且子组件应该只依赖于它的父组件。这样可以保持组件之间的清晰关系，并有助于管理和维护代码。
• 通信和状态管理：考虑组件之间的通信和状态管理。如果一个组件需要频繁地与其他组件通信或共享状态，那么可能需要考虑使用Vue的状态管理库（如Vuex）来管理这些状态。
• 性能考虑：对于一些特别复杂或需要大量计算的组件，可以考虑将其拆分为更小的组件，以提高性能。这是因为Vue的组件化系统允许我们按需加载和渲染组件，从而可以减少不必要的计算和渲染

scoped在Vue中是一个非常重要的属性，它主要用于限制CSS样式的作用范围，确保样式只应用于当前组件，避免全局样式污染。具体来说，scoped的作用有以下几点：

1. 组件样式私有化：使用scoped属性后，组件的样式只会作用于当前组件，而不会影响到其他组件。这有助于防止不同组件之间的样式冲突，提高了样式的可维护性和可重用性。
2. 避免全局样式污染：在大型项目中，如果每个组件都使用全局样式，很容易导致样式冲突和难以维护。使用scoped属性可以确保每个组件的样式都是独立的，不会影响到其他组件或全局样式，从而避免了全局样式污染的问题。
3. 提高性能：由于scoped属性限制了样式的作用范围，Vue在渲染组件时可以更精确地确定哪些样式需要应用到哪些元素上，从而提高了渲染性能

data

• 组件实例的独立性：在 Vue 中，每个组件实例都维护着自己的状态。如果 data 是一个直接的对象，那么当创建多个组件实例时，它们会共享同一个 data 对象。这意味着改变一个组件实例的状态会影响到所有其他组件实例的状态，这显然是不符合我们期望的
• 组件复用：在 Vue 中，组件是可以复用的。如果 data 是一个对象，并且组件被多次复用，那么所有的复用实例都会共享同一个 data 对象，这会导致状态混乱。通过将 data 设置为函数，我们可以确保每次组件被复用时，都会有一个新的数据对象被创建