###
Vue 3 Setup
语法糖简介
Vue 3 的 `setup`
语法糖是一种简化开发流程的方式，它通过减少样板代码使开发者能够更高效地编写组件逻辑。以下是关于其具体用法的详细介绍。
---
#### 基础概念与特点
在
Vue 3.
2 版本之后，`<script setup>` 被引入作为 `setup()` 函数的一种
语法糖形式[^1]。这种新特性允许我们在 `<script setup>` 标签中直接声明响应式数据、方法以及其他组合式 API 功能，而无需显式调用 `return` 或者手动注册导入的组件[^3]。
- **省略 Return**: 不再需要像传统 `setup` 那样将要暴露给模板
使用的变量和方法返回出来。
- **自动解析 this**: 在 `<script setup>` 中，`this` 是未定义的 (undefined)，因此可以完全避免因误用 `this` 导致的问题[^
2]。
- **简化组件注册**: 所有通过 `import` 引入的内容可以直接用于当前组件内部，无论是子组件还是其他资源文件[^4]。
---
#### 示例代码展示
以下是一些具体的例子来说明如何利用 `<script setup>` 来构建
Vue 组件：
##### 示例 1: 定义简单的状态管理
```javascript
<script setup>
//
使用 ref 创建响应式的计数器
import { ref, onMounted } from '
vue';
const count = ref(0);
function increment() {
count.value++;
}
onMounted(() => {
console.log('组件已挂载');
});
</script>
<template>
<div>
<p>当前计数值：{{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
```
上述示例展示了如何创建一个基本的状态管理系统并绑定到按钮点击事件上。
##### 示例
2: 自动解构 Props 和 Emit
```javascript
<script setup>
defineProps({
title: String,
});
const emit = defineEmits(['update:title']);
</script>
<template>
<h1>{{ title }}</h1>
<
input type="text" :value="title" @
input="$emit('update:title', $event.target.value)" />
</template>
```
这里演示了如何接收父级传递下来的 prop 属性以及触发自定义事件通知外部改变标题的行为。
##### 示例 3: 直接
使用导入的组件
假设有一个名为 MyButton.
vue 的独立组件，则可以在另一个地方这样轻松加载并应用它：
```javascript
<script setup>
import MyButton from './MyButton.
vue';
</script>
<template>
<MyButton label="Click Me!" />
</template>
```
注意，在此情况下不需要额外配置任何全局或局部范围内的组件列表即可正常
使用该模块实例化后的对象实体。
---
#### 总结
综上所述，借助于 `<script setup>` 提供的功能扩展机制，我们可以极大地提高日常编码效率的同时保持良好的可维护性和清晰度。然而需要注意的是，尽管这种方式非常方便快捷，但在某些特殊场景下可能仍然需要用到完整的选项API模式或者单独设置一些特殊的生命周期钩子等操作。
---
博客指出语法糖是优秀的，此前理解不深入。它本质上可自定义用于各种场景，常用在input、radio等。以input v-model为例说明用法，还强调子组件要通过$emit向父组件抛事件，由父组件改变value值。
扫一扫
1738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
