什么是Vue组件？如何创建和使用组件？

啥是组件？
组件就是Vue应用中的小模块，可以重复使用的代码块。组件使得开发大型应用更加容易，因为你可以把代码分成多个小块，每个小块都负责特定的任务，就像搭乐高积木一样。

创建组件
在Vue中创建组件有两种方式：

1. 注册组件
   使用Vue.component()方法注册一个全局组件：

Vue.component('my-component', {  
  // 组件选项  
  // ...  
})

2. 局部注册组件
   在某个Vue实例中注册一个局部组件：

new Vue({  
  el: '#app',  
  components: {  
    'my-component': MyComponent // 局部注册组件  
  }  
})

使用组件
在模板中使用组件：

<template>  
  <div>  
    <my-component></my-component>  
  </div>  
</template>

组件选项

1. 模板选项
   template：组件的HTML模板。可以包含其他组件和指令。注意，模板选项不能在全局注册时使用。

<template>  
  <div>  
    <p>{{ msg }}</p> // 其他Vue选项或计算属性可以在组件的模板中使用。这里还能包含其他组件！  
  </div>  
</template>

2. 数据选项
   data：组件的数据对象，可以包含任意数据。注意，数据选项不能在全局注册时使用。

<script>  
export default {  
  data() { // 使用函数定义异步获取数据！这在加载大型数据集合时特别有用！) 
}

3. 方法选项
   methods：组件的方法，可以在组件的模板中调用。方法选项不能在全局注册时使用。

<script>  
export default {  
  methods: {  
    greet() {  
      alert('Hello!')  
    }  
  }  
}  
</script>

4. 计算属性选项
   computed：组件的计算属性，可以在组件的模板中使用。计算属性选项不能在全局注册时使用。

<script>  
export default {  
  data() {  
    return {  
      message: 'Hello'  
    }  
  },  
  computed: {  
    reversedMessage() {  
      return this.message.split('').reverse().join('')  
    }  
  }  
}  
</script>

5. 事件选项
   events：组件可以监听和触发的事件，可以在组件的模板中使用。事件选项不能在全局注册时使用。

<script>  
export default {  
  events: {  
    click: 'greet' // 监听 click 事件，并在事件触发时调用 greet 方法。  
  },  
  methods: {  
    greet() {  
      alert('Hello!')  
    }  
  }  
}  
</script>

6. 样式选项
   styles：组件的样式，可以在组件的模板中使用。样式选项不能在全局注册时使用。样式可以包含其他CSS模块，例如less或sass。在样式选项中，可以使用&符号来引用组件的data数据。例如：color: &primaryColor;。

<script>  
export default {  
  data() {  
    return {  
      primaryColor: 'blue'  
    }  
  },  
  styles: {  
    color: '&primaryColor' // 使用&来引用组件的数据对象中的primaryColor属性。  
  }  
}  
</script>

7. 生命周期选项
   lifecycle：组件的生命周期钩子函数，可以在组件的创建、更新、销毁等阶段调用。生命周期选项不能在全局注册时使用。下面是一些常见的生命周期钩子函数：created()：组件创建时调用；mounted()：组件挂载到DOM上时调用；updated()：组件更新时调用；destroyed()：组件销毁时调用。注意，这些钩子函数都是函数选项，而不是计算属性或方法选项。下面是一个例子：

<script>  
export default {  
  created() { // 组件创建时调用。可以在这时初始化一些状态或执行一些操作。例如，初始化一个定时
  },
  mounted() { // 组件挂载到DOM上时调用。可以在这时执行一些与DOM操作相关的操作。例如，获取组件的DOM元素。   
    this.$refs.myElement // 获取组件的引用，例如：this.$refs.myElement.style.color = 'red';  
  },  
  updated() { // 组件更新时调用。可以在这时执行一些与数据更新相关的操作。例如，重新计算某个属性的值。   
    // ...  
  },  
  destroyed() { // 组件销毁时调用。可以在这时执行一些清理操作。例如，取消定时器或解绑事件监听器。   
    // ...  
  }  
</script>
}