Vue组件基础解析

一、组件的核心意义

组件是Vue中实现UI复用与逻辑封装的基础单元，能将复杂UI拆分为独立、可重用的部分，最终组织成嵌套的树状结构（类似HTML元素嵌套）。Vue组件模型支持自定义内容与逻辑封装，也能兼容原生Web Component。

二、组件的定义方式

根据是否使用构建步骤，Vue组件有两种主要定义方式：

1. 单文件组件（SFC，推荐用构建步骤时）

定义在.vue文件中，整合模板、脚本、样式，示例：

 <script setup>
 import { ref } from 'vue'
 const count = ref(0) // 组件内部状态
 </script>
 ​
 <template>
   <!-- 模板与状态绑定 -->
   <button @click="count++">You clicked me {{ count }} times.</button>
 </template>

• 优势：结构清晰，支持语法高亮、CSS作用域等特性。

2. JavaScript对象定义（不使用构建步骤时）

通过包含Vue选项的JS对象定义，模板可内联或指向DOM元素，示例：

 import { ref } from 'vue'
 ​
&nbs