Vue学习：Vue3的单文件组件、script的setup属性

原创

专家一百锦再 2024-12-17 13:48:51 ©著作权

文章标签 vue.js 学习前端 Vue 显式 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者专家一百锦再的原创作品，请联系作者获取转载授权，否则将追究法律责任

让我们一起走向未来
🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

Vue学习：Vue3的单文件组件、script的setup属性_显式_02

在 Vue 3 中，<script setup> 是一种全新的、简化的语法，用于编写组件的逻辑。它是 Vue 3 引入的 组合式 API（Composition API）的扩展，能够更简洁、直观地组织组件的响应式状态、方法、计算属性等，同时也能减少样板代码。它让开发者能在 Vue 单文件组件中更高效地使用 setup 函数的功能。

1. `<script setup>` 简介

Vue学习：Vue3的单文件组件、script的setup属性_学习_04

#### 解释：

- **`<script setup>`** 标签直接包含组件逻辑，无需显式声明 `setup()`。
- **`import`**：你可以在 `<script setup>` 中导入依赖库或模块。
- **响应式数据**：直接使用 `ref`、`reactive` 等 API 来定义响应式数据，所有在 `<script setup>` 中定义的变量会自动暴露到模板中。
- **方法和计算属性**：方法、计算属性也可以直接定义，不需要返回。

### 4. 特性和用法

#### 1. **导入和暴露变量**

在 `<script setup>` 中定义的所有变量都会自动暴露到模板中，无需手动返回。

```vue
<script setup>
import { ref } from 'vue';

const count = ref(0); // 自动暴露到模板
</script>

Vue学习：Vue3的单文件组件、script的setup属性_学习_05

2. 响应式数据

使用 ref 或 reactive 来声明响应式数据，它们会自动暴露到模板。

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

3. 计算属性

使用 computed 来定义计算属性，它们也会自动暴露到模板。

<script setup>
import { ref, computed } from 'vue';

const num1 = ref(2);
const num2 = ref(3);

const sum = computed(() => num1.value + num2.value);
</script>

4. 方法

方法可以直接在 <script setup> 中定义，无需显式的 methods 属性。

<script setup>
import { ref } from 'vue';

const message = ref('Hello');

const changeMessage = () => {
  message.value = 'Hello, World!';
};
</script>

Vue学习：Vue3的单文件组件、script的setup属性_显式_06

5. 生命周期钩子

Vue 3 的生命周期钩子（如 onMounted、onUpdated、onUnmounted 等）可以直接在 <script setup> 中使用。

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component mounted!');
});
</script>

6. 组件 props

使用 defineProps 来定义组件的 props。defineProps 是 Vue 3 引入的一个全局 API，专门用于在 <script setup> 中定义 props。

<script setup>
defineProps({
  message: String
});
</script>

Vue学习：Vue3的单文件组件、script的setup属性_前端_07

7. 组件 emits

使用 defineEmits 来定义组件的事件（emits）。

<script setup>
defineEmits(['update']); // 定义 update 事件
</script>

8. 类型推导支持（TypeScript）

#### 9. **defineExpose**

如果你需要显式地暴露一些属性或方法到父组件，可以使用 `defineExpose`。

```vue
<script setup>
import { ref } from 'vue';

const message = ref('Hello from child');

defineExpose({
  message
});
</script>

Vue学习：Vue3的单文件组件、script的setup属性_vue.js_08

5. 与普通 `setup` 的区别

特性	普通 `setup()`	`<script setup>`
定义方式	需要显式声明 `setup()` 函数	无需显式声明，直接在 `<script setup>` 中编写逻辑
返回值	需要显式 `return` 返回对象	不需要 `return`，自动暴露到模板中的变量
性能优化	无特殊优化	Vue 会在编译时优化，性能更高
样板代码	需要 `export default` 和 `setup` 函数	更简洁，自动管理 `setup` 逻辑