Vue.js是一个构建用户界面的渐进式框架，以其简单易学和强大的功能而受到前端开发者的喜爱。本文可作为React开发者使用Vue3.x的前菜，将封装Vue组件作为切入点，打开Vue3的学习之门。

基础版本

在Vue 3.x中，组件是自定义元素，Vue的编译器为这些元素附加特殊行为。组件是可复用的Vue实例，因此它们接受相同的选项，如data, computed, watch, methods以及生命周期钩子等。

步骤1：创建组件

首先，我们创建一个简单的Vue组件。在src/components目录下，创建一个名为MyButton.vue的文件。这将是我们的基础组件。

html 复制代码

// MyButton.vue
<template>
  <button>{{ buttonText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  data() {
    return {
      buttonText: '点击我'
    }
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #f60;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>

这个组件非常简单：一个带有文本的按钮。<template>中定义了组件的HTML结构，<script>中定义了组件的逻辑，而<style scoped>则是组件的局部样式。

步骤2：在应用中使用组件

要在Vue应用中使用这个组件，你需要在父组件中导入并注册它。假设你想在App.vue中使用MyButton组件。

html 复制代码

// App.vue
<template>
  <div id="app">
    <MyButton />
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue';

export default {
  name: 'App',
  components: {
    MyButton
  }
}
</script>

通过这种方式，你就可以在App.vue组件中使用<MyButton />标签来渲染按钮了。

Vue组件中`export default`导出的对象键值解释

在Vue组件中，export default语句用于导出一个对象，这个对象定义了组件的许多重要特性。以下是一些常见键值及其含义：

name: 定义了组件的名称。在调试时或使用递归组件时非常有用。
props: 定义组件可以接受的外部传入数据的规则。
data: 返回组件的局部状态。必须是一个函数。
computed: 定义计算属性，依赖其他属性值，并且其值会被缓存起来，只有当依赖属性值发生改变时才会重新计算。
methods: 包含组件的方法，可以通过模板中的事件绑定或程序代码调用。
watch: 用于观察和响应Vue实例上的数据变动。对于更复杂的逻辑，使用计算属性可能不够用时，可以使用侦听器。
components: 本地注册的子组件，表示只在当前组件模板中可用。
mixins: 混入对象，可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被"混合"进入该组件本身的选项。
directives: 局部注册的自定义指令。
filters: （Vue 2.x 版本）定义组件局部过滤器，用于一些常见的文本格式化。
provide / inject: 用于高阶组件/插件开发，允许一个组件向所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

这些键对应React中的什么

下面是Vue中的一些常见export default的键在React中的对应概念：

data : 在React中，组件的状态（state）是对应的概念。React使用useState或类组件的state属性来保持组件状态。
props : 在Vue和React中，props的概念是一致的，用于父子组件间的数据传递。
computed : React中没有直接对应的概念，但可以通过useMemo钩子来实现类似的功能，用于返回一个memoized值。
methods: React中，方法通常直接定义为组件的成员函数。对于函数组件，直接在函数体内部定义即可。
watch : React使用useEffect钩子来实现类似的侦听数据变化的功能。
components: 在React中，通过import引入组件并在JSX中直接使用，不需要在特定字段中注册。
mixins: React没有直接对应的概念，但可以通过高阶组件（HOC）、自定义钩子（Hooks）、或组合组件等方式达到类似的代码复用。
directives: React中没有指令的概念，但可以通过高阶组件或自定义钩子实现类似的功能扩展。
filters: React中没有过滤器的概念，通常通过JavaScript函数直接在JSX中或之前处理数据格式化。

理解这些概念之间的对应关系，有助于从Vue转向React或者同时使用这两个框架的开发者更好地理解和应用。

进阶版本

接下来将对MyButton组件进行扩展，使其支持接收外部传入的参数（props）。

步骤1：使用props传递数据

希望按钮的文本能够通过父组件动态传入，而不是在组件内部硬编码。

修改MyButton.vue，添加props选项：

html 复制代码

// MyButton.vue
<template>
  <button>{{ buttonText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    buttonText: {
      type: String,
      default: '点击我'
    }
  }
}
</script>

现在，buttonText可以作为一个属性从父组件传入了。

步骤2：父组件中传递数据

修改App.vue，从父组件向MyButton传递一个自定义的文本。

html 复制代码

// App.vue
<template>
  <div id="app">
    <MyButton buttonText="确认" />
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue';

export default {
  name: 'App',
  components: {
    MyButton
  }
}
</script>

通过这种方式，你可以灵活地控制按钮显示的文本了。

结尾

通过上述步骤，相信你已经学会了如何封装一个基础的Vue组件，并通过使用props来让组件更加灵活和可复用。Vue组件的封装和使用是Vue开发的核心，掌握这些基础知识后，你可以进一步探索Vue的其他高级特性，如插槽（slots）、自定义事件等，来构建更加复杂和强大的应用。

你如何教一个React开发使用Vue3

基础版本

Vue组件中export default导出的对象键值解释

这些键对应React中的什么

进阶版本

结尾

Vue组件中`export default`导出的对象键值解释