vue3中setup如何使用
时间: 2025-01-29 20:48:42 浏览: 37
### Vue3 Setup 语法糖简介
Vue3 中 `setup` 函数提供了一种新的组合式 API 来替代传统的选项式 API。通过 `<script setup>` 语法糖,可以简化模板中的逻辑编写过程[^2]。
#### 创建 Vue3 项目并配置 ECharts
为了展示如何在 Vue3 组件中使用 `setup` 语法糖,先创建一个新的 Vue3 项目:
```bash
npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install
```
接着安装 ECharts 库以便后续演示图表功能:
```bash
npm install echarts --save
```
#### 使用 Script Setup 定义响应式变量
下面是一个简单的例子,在其中定义了一个名为 `up` 的响应式变量,并将其用于模板渲染中:
```html
<template>
<div>{{ up }}</div>
</template>
<script setup>
import { ref } from 'vue'
let up = ref(123)
</script>
```
此代码片段展示了如何利用 `ref()` 方法来声明一个可变的状态对象 `up` 并赋初值为 `123`。由于采用了 `<script setup>` 形式的脚本标签,因此不需要显式导出默认组件对象。
#### 结合 Lifecycle Hooks 和 Composables
除了基本的数据绑定外,还可以轻松集成生命周期钩子以及自定义组合函数 (composable),如下所示:
```javascript
// 导入所需模块
import { onMounted, ref } from 'vue';
import * as echarts from "echarts";
export default {
setup() {
const chartInstance = ref(null);
// 当组件挂载完成后初始化Echarts实例
onMounted(() => {
var myChart = echarts.init(chartInstance.value);
// 指定图表的配置项和数据...
myChart.setOption({
title: {
text: 'ECharts Example',
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
return {
chartInstance,
};
}
}
```
上述代码实现了当组件完成首次 DOM 渲染之后 (`onMounted`) 初始化 ECharts 图表的功能。
阅读全文