Vue 3 教程：入门指南

Vue 3 教程：入门指南
- 引言
- 1. 初始化项目
- 2. 响应式数据
- - 使用 `ref`
  - 使用 `reactive`
- 3. 计算属性
- 4. 侦听器
- 5. 组合式 API
- 6. 总结

引言

Vue.js 是一个用于构建用户界面的渐进式框架。Vue 3 引入了许多新的特性和改进，使得构建现代 Web 应用程序变得更加简单和高效。在本教程中，我们将介绍 Vue 3 的基本概念和使用方法，帮助你快速上手。

1. 初始化项目

首先，我们需要安装 Vue CLI 来初始化一个 Vue 3 项目。

npm install -g @vue/cli
vue create my-vue3-app
cd my-vue3-app
npm run serve

这将启动一个开发服务器，并在浏览器中打开一个新的 Vue 3 项目。

2. 响应式数据

在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的两个主要 API。

使用 `ref`

ref 用于创建一个响应式的单一值。

<script setup>
import { ref } from 'vue';const count = ref(0);function increment() {count.value++;
}
</script><template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template>

使用 `reactive`

reactive 用于创建一个响应式对象。

<script setup>
import { reactive } from 'vue';const state = reactive({count: 0
});function increment() {state.count++;
}
</script><template><div><p>{{ state.count }}</p><button @click="increment">Increment</button></div>
</template>

3. 计算属性

计算属性是基于其他响应式数据计算出来的属性。它们在 Vue 3 中由 computed 函数定义。

<script setup>
import { ref, computed } from 'vue';const count = ref(0);const doubleCount = computed(() => count.value * 2);
</script><template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="count++">Increment</button></div>
</template>

4. 侦听器

侦听器用于侦听响应式数据的变化，并在数据变化时执行指定的回调函数。

<script setup>
import { ref, watch } from 'vue';const count = ref(0);watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script><template><div><p>Count: {{ count }}</p><button @click="count++">Increment</button></div>
</template>

5. 组合式 API

Vue 3 引入了组合式 API，使得代码更加模块化和可复用。组合式 API 主要通过 setup 函数来使用。

<script setup>
import { ref } from 'vue';const count = ref(0);function useCounter() {const count = ref(0);function increment() {count.value++;}return {count,increment};
}const { count: counter, increment } = useCounter();
</script><template><div><p>Count: {{ counter }}</p><button @click="increment">Increment</button></div>
</template>