1. 什么是Vue组件
在Vue中，组件是构成Vue应用的基本单元。每个Vue组件通常都包含一个模板(template)、一个样式(style)和一个逻辑部分(script)。Vue组件的作用是将应用程序分解为多个可复用的独立的功能块。
Vue中的组件可以是有状态的(stateful)或无状态的(stateless)。
2. 有状态组件(stateful component)
有状态组件(stateful component)代表着组件具有自己的状态(state)，当组件被渲染时，状态将被用来控制组件的行为。这是Vue组件中最常用的一种类型，可以使用Vue的data选项来定义组件的状态。
有状态组件一般具有以下几个特征：
有自己的状态(state)
可以接收props作为输入数据
可以使用computed属性和watch属性来监听状态变化
可以调用Vue的生命周期钩子来处理组件的生命周期
2.1 创建有状态组件
下面是一个简单的有状态组件的示例：
Vue.component('temperature', {
data: function () {
return {
value: 0
}
},
template: '
当前温度: {{ value }}℃'
})
在上面的代码中，我们定义了一个名为"temperature"的组件，它具有自己的状态(value)，初始值为0。我们还定义了组件的模板(template)，用来将组件渲染到DOM中。
使用以上组件的语法为：
<template>
<temperature></temperature>
</template>
3. 无状态组件(stateless component)
与有状态组件不同，无状态组件(stateless component)不具有自己的状态(state)，而是依赖于传入的props来展现不同的行为。无状态组件一般用于展示类似静态内容的内容。
无状态组件一般具有以下几个特征：
没有自己的状态(state)
可以接收props作为输入数据
不需要使用computed属性、watch属性或生命周期钩子
一般情况下，无状态组件只需要一个模板(template)
3.1 创建无状态组件
下面是一个简单的无状态组件的示例:
Vue.component('hello', {
props: ['message'],
template: '
Hello, {{ message }}'
})
在上面的代码中，我们定义了一个名为"hello"的组件，它没有自己的状态(state)，而是依赖于传入的props来展现不同的行为。我们定义了组件的props为"message"，用来接收一个字符串类型的输入数据。我们还定义了组件的模板(template)，用来将组件渲染到DOM中。
使用以上组件的语法为：
<template>
<hello message="Vue"></hello>
</template>
4. 有状态组件和无状态组件的区别
有状态组件和无状态组件的区别在于它们是否具有自己的状态(state)。当我们需要管理组件自身的状态时，我们应该使用有状态组件；当我们只需要展示传入的数据时，我们应该使用无状态组件。
除此之外，有状态组件和无状态组件可以看作是同样的组件类型，它们都具有相同的生命周期钩子和其他属性。
5. 总结
在Vue中，组件是应用程序的基本单元，组件可以根据其状态是否独立管理来分为有状态组件和无状态组件。当我们需要管理组件自身的状态时，我们应该使用有状态组件；当我们只需要展示传入的数据时，我们应该使用无状态组件。无论是有状态组件还是无状态组件，它们都可以使用组件模板(template)、样式(style)和逻辑部分(script)来实现各自的功能。