使用 vue3 setup语法

### Vue 3 中 Setup 语法使用教程 Vue 3 引入了一种新的组件定义方式——`setup`语法糖，这种语法简化了组合式 API 的书写过程，使得开发者能够更方便地声明响应式变量和方法。以下是关于如何在 Vue 3 中使用 `setup` 语法的具体说明。 --- #### 1. 基础概念 `setup` 是 Vue 3 提供的一个特殊生命周期钩子，在组件实例被创建之前执行。它的作用域独立于组件的其余部分，允许我们在其中定义所有的响应式数据、计算属性以及方法[^1]。 --- #### 2. 使用 Script Setup 简化 Syntax Vue 3 进一步推出了 `<script setup>` 语法糖，这是一种更为简洁的方式来编写基于 `setup` 的组件。它省去了显式的导出步骤，让代码更加直观易读[^3]。 ##### 示例代码： ```vue <script setup> import { ref, reactive } from 'vue' // 定义一个简单的响应式变量 const count = ref(0) // 定义复杂的状态对象 const state = reactive({ name: 'Vue', version: '3.x' }) // 方法定义 function increment() { count.value++ } </script> <template> <div> <p>Count is: {{ count }}</p> <button @click="increment">Increment</button> <p>Name: {{ state.name }} Version: {{ state.version }}</p> </div> </template> ``` --- #### 3. 响应式数据绑定 在 `setup` 函数中，可以利用 Vue 3 提供的核心工具如 `ref` 和 `reactive` 来创建响应式数据。 - **Ref**: 用于单个值（字符串、数字等），返回的是一个带有 `.value` 属性的对象。 - **Reactive**: 用于复杂的嵌套对象，直接返回原始对象本身。 ##### 示例代码： ```javascript import { ref, reactive } from 'vue' // 单一值响应式 const message = ref('Hello Vue') // 对象响应式 const user = reactive({ firstName: 'John', lastName: 'Doe' }) ``` --- #### 4. 计算属性与监听器 除了普通的响应式数据外，还可以通过 `computed` 和 `watch` 来实现依赖追踪的功能。 ##### 计算属性示例： ```javascript import { computed } from 'vue' const fullName = computed(() => `${user.firstName} ${user.lastName}`) ``` ##### 监听器示例： ```javascript import { watch } from 'vue' watch( () => user.firstName, (newValue, oldValue) => { console.log(`First Name changed from ${oldValue} to ${newValue}`) } ) ``` --- #### 5. 生命周期钩子 尽管 `setup` 已经覆盖了许多传统钩子的行为，但我们仍然可以通过导入特定的方法来调用它们。例如： - `onMounted`: 组件挂载完成后触发。 - `onUnmounted`: 组件卸载前触发。 ##### 示例代码： ```javascript import { onMounted, onUnmounted } from 'vue' onMounted(() => { console.log('Component has been mounted') }) onUnmounted(() => { console.log('Component will be unmounted') }) ``` --- #### 6. 第三方库集成 当需要与其他第三方库（比如 ECharts）一起工作时，也可以借助 `setup` 语法完成初始化配置[^2]。 ##### 整合 ECharts 示例： ```vue <script setup> import * as echarts from 'echarts' import { ref, onMounted } from 'vue' const chartDiv = ref(null) onMounted(() => { const myChart = echarts.init(chartDiv.value) const option = { title: { text: 'ECharts Example' }, tooltip: {}, xAxis: { data: ['A', 'B', 'C'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36] }] } myChart.setOption(option) }) </script> <template> <div ref="chartDiv" style="width: 600px; height: 400px;"></div> </template> ``` --- ### 总结 以上展示了如何在 Vue 3 中运用 `setup` 语法构建现代前端应用程序的过程。无论是基础的数据绑定还是高级特性支持，都可以轻松实现并保持良好的可维护性。 ---