Vue3 教程

Vue 3 是一个流行的 JavaScript 框架，用于构建用户界面，特别适用于单页应用（SPA）。它采用了现代的开发工具和理念，具有更高的性能、可维护性和灵活性。以下是一个关于 Vue 3 的基础教程，帮助您快速入门并理解它的核心概念。

1. 安装和创建 Vue 3 项目

使用 Vue CLI 安装

1. 安装 Vue CLI（如果尚未安装）： npm install -g @vue/cli
2. 创建一个新的 Vue 3 项目： vue create my-vue-app
3. 在创建过程中，您可以选择默认配置或手动选择特性。选择 Vue 3 配置（如果没有默认选择）并完成创建。
4. 进入项目目录并启动开发服务器： cd my-vue-app npm run serve 访问 http://localhost:8080 即可看到 Vue 项目的默认页面。

使用 Vite 安装（推荐）

Vite 是一个现代前端构建工具，可以快速启动 Vue 3 项目。

1. 使用 Vite 创建 Vue 3 项目： npm create vite@latest my-vue-app --template vue
2. 安装依赖并启动： cd my-vue-app npm install npm run dev 访问 http://localhost:5173 即可看到您的 Vue 3 项目。

2. Vue 3 基础概念

组件

Vue 的核心思想是组件化。每个 Vue 应用由多个组件组成，组件是独立且可复用的代码单元，通常由三部分组成：

• 模板（Template）：定义组件的 HTML 结构。
• 脚本（Script）：定义组件的逻辑（如数据、方法、生命周期等）。
• 样式（Style）：定义组件的样式。

一个基本的 Vue 组件示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue 3!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "Message Changed!";
    }
  }
};
</script>

<style scoped>
h1 {
  color: green;
}
</style>

模板语法

Vue 的模板语法包括：

• 插值语法：用于插入变量或表达式值。 <h1>{{ message }}</h1>
• 指令：Vue 提供的特殊标记，绑定数据或处理事件等。常见的指令包括：
  • v-if：条件渲染。
  • v-for：列表渲染。
  • v-bind：动态绑定属性。
  • v-on：绑定事件。
  例如： <button v-on:click="increment">Click Me</button> <img v-bind:src="imageUrl" alt="Image">

响应式数据

Vue 3 使用 Proxy 实现响应式数据系统。您不再需要使用 Vue.set 或 this.$set，所有的数据绑定和更新都是自动响应的。

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

app.mount("#app");

事件处理

Vue 通过 v-on 指令来监听 DOM 事件并触发对应的方法。

<button v-on:click="handleClick">Click Me</button>

methods: {
  handleClick() {
    console.log('Button clicked!');
  }
}

计算属性（Computed Properties）

计算属性是基于它们的依赖进行缓存的，只有在相关依赖发生变化时才会重新计算。

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

侦听属性（Watchers）

当数据变化时，侦听属性可以用来执行异步或开销较大的操作。

watch: {
  count(newValue, oldValue) {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
}

3. Vue 3 的新特性

Composition API

Vue 3 引入了 Composition API，它与传统的 Options API（如 data、methods 等）并行存在。Composition API 提供了更加灵活和可重用的方式来组织代码，尤其适用于大型应用和复杂组件。

• ref：用于创建响应式数据。 import { ref } from 'vue'; export default { setup() { const count = ref(0); const increment = () => count.value++; return { count, increment }; } }
• reactive：用于创建响应式对象。 import { reactive } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); const increment = () => state.count++; return { state, increment }; } }
• computed：与 computed 选项类似，用于创建计算属性。 import { computed, ref } from 'vue'; export default { setup() { const count = ref(0); const reversedMessage = computed(() => count.value * 2); return { count, reversedMessage }; } }
• watch：用于侦听数据变化。 import { watch } from 'vue'; export default { setup() { const count = ref(0); watch(count, (newCount, oldCount) => { console.log(`Count changed from ${oldCount} to ${newCount}`); }); return { count }; } }

Teleport

Teleport 是 Vue 3 中的新功能，允许您将子组件的 DOM 移动到父组件外部。非常适用于模态框、弹出框等组件。

<template>
  <teleport to="body">
    <div class="modal">
      <p>This is a modal!</p>
    </div>
  </teleport>
</template>

Fragments

在 Vue 3 中，一个组件可以返回多个根节点，而不必像 Vue 2 一样只能返回一个根元素。

<template>
  <h1>Hello</h1>
  <p>World!</p>
</template>

4. Vue 路由（Vue Router）

Vue Router 是 Vue.js 的官方路由库，用于在单页应用中进行页面导航。

1. 安装 Vue Router： npm install vue-router@4
2. 配置路由： import { createRouter, createWebHistory } from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router;
3. 在 main.js 中挂载路由： import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app');
4. 在组件中使用路由链接： <router-link to="/about">Go to About</router-link> 使用路由视图： <router-view></router-view>

5. Vuex 状态管理

Vuex 是 Vue 的状态管理工具，适用于中大型应用的状态管理。

1. 安装 Vuex： npm install vuex@next
2. 配置 Vuex Store： import { createStore } from 'vuex'; const store = createStore({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment'); }, 1000); } } }); export default store;
3. 在 main.js 中挂载 Vuex： import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; createApp(App).use(store).mount('#app');

总结

Vue 3 提供了更高效、更灵活的功能，如 Composition API、Teleport 和 Fragments，这些

使得开发变得更加直观和易于维护。无论是小型项目还是大型应用，Vue 3 都是一个非常强大的工具，值得深入学习。如果您对 Vue 3 的某些方面有疑问或需要进一步学习，随时告诉我！