Vue 3 学习指南Vue 3 学习指南引言 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架

Vue 3 学习指南

引言

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是，Vue 采用自底向上增量开发设计。Vue 的核心库只关注视图层，并且非常容易学习和集成第三方库或现有项目。

Vue 3 是 Vue.js 的新版本，引入了一些重大改进和新特性，使其更加高效和强大。本指南将带你全面了解 Vue 3，从基础知识到高级应用，通过详细的代码示例和实践案例，帮助你掌握 Vue 3 开发技能。

Vue 3 简介
安装和环境配置
Vue 3 基础
- 模板语法
- 响应式数据
- 计算属性和侦听器
Vue 3 组件
- 创建和注册组件
- 父子组件通信
- 插槽
- 动态组件
Vue 3 高级特性
- 组合式 API
- 自定义指令
- 插件
- Vue Router
- Vuex 状态管理
Vue 3 实践案例
- Todo 应用
- 博客系统
部署与优化
总结

1. Vue 3 简介

Vue 3 是 Vue.js 的最新版本，具有更高的性能和更小的体积。它采用了 Proxy 进行响应式数据的处理，替代了 Vue 2 中的 Object.defineProperty，大大提升了性能。此外，Vue 3 引入了组合式 API，使得代码复用和逻辑组织更加灵活和清晰。

新特性

性能优化：响应式系统的改进，使得 Vue 3 的性能有了显著提升。
组合式 API：提供了更灵活和强大的代码组织方式，便于代码复用。
Fragment：支持组件返回多个根元素，简化了模板结构。
Teleport：允许将组件的 DOM 移动到其他地方渲染。
新工具链：包括 Vue CLI 4、Vite 等，使得开发体验更加高效。

2. 安装和环境配置

安装 Node.js

在开始使用 Vue 3 之前，需要先安装 Node.js。可以从 Node.js 官方网站下载并安装最新版本的 Node.js。

安装 Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。它提供了丰富的功能和插件，极大地提升了开发效率。

npm install -g @vue/cli

创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目。

vue create my-vue3-app

在项目创建过程中，可以选择 Vue 3 版本。

目录结构

项目创建完成后，项目的目录结构如下：

my-vue3-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── vue.config.js

3. Vue 3 基础

模板语法

Vue.js 使用基于 HTML 的模板语法，通过指令将数据绑定到 DOM。常用指令包括 v-bind、v-if、v-for 和 v-on。

<template>
  <div>
    <p v-if="isVisible">Hello, Vue 3!</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    },
  },
};
</script>

响应式数据

Vue 3 使用 reactive 和 ref 函数来创建响应式数据。

import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    const increment = () => {
      state.count++;
    };

    return {
      state,
      increment,
    };
  },
};

计算属性和侦听器

计算属性是基于响应式依赖自动缓存的属性，而侦听器用于观察和响应数据的变化。

import { computed, ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });

    return {
      count,
      doubleCount,
    };
  },
};

4. Vue 3 组件

组件是 Vue.js 的核心概念之一。通过组件，可以将应用拆分为多个独立且可复用的部分。

创建和注册组件

创建一个新的组件，并在父组件中注册和使用。

// src/components/HelloWorld.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

// src/App.vue
<template>
  <div>
    <HelloWorld message="Hello from App.vue" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld,
  },
};
</script>

父子组件通信

父组件通过 props 传递数据给子组件，子组件通过 emit 事件向父组件发送消息。

// src/components/ChildComponent.vue
<template>
  <div>
    <button @click="notifyParent">Notify Parent</button>
  </div>
</template>

<script>
export default {
  emits: ['notify'],
  methods: {
    notifyParent() {
      this.$emit('notify', 'Message from child');
    },
  },
};
</script>

// src/App.vue
<template>
  <div>
    <ChildComponent @notify="handleNotify" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleNotify(message) {
      console.log(message);
    },
  },
};
</script>

插槽

插槽允许在组件中插入外部内容。可以使用默认插槽和具名插槽。

// src/components/Container.vue
<template>
  <div>
    <slot></slot>
  </div>
</template>

// src/App.vue
<template>
  <Container>
    <p>This is some content inside the container.</p>
  </Container>
</template>

<script>
import Container from './components/Container.vue';

export default {
  components: {
    Container,
  },
};
</script>

动态组件

使用 component 组件可以动态切换组件。

<template>
  <component :is="currentComponent"></component>
  <button @click="toggleComponent">Toggle Component</button>
</template>

<script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  components: {
    ComponentA,
    ComponentB,
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
};
</script>

5. Vue 3 高级特性

组合式 API

组合式 API 是 Vue 3 引入的新特性，提供了一种更加灵活和强大的代码组织方式。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};

自定义指令

自定义指令可以对 DOM 元素进行底层操作。

// src/directives/v-focus.js
export default {
  mounted(el) {
    el.focus();
  },
};

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import vFocus from './directives/v-focus';

const app = createApp(App);
app.directive('focus', vFocus);
app.mount('#app');

<!-- src/App.vue -->
<template>
  <input v-focus />
</template>

插件

Vue.js 插件用于扩展 Vue 的功能。可以编写自己的插件或使用第三方插件

。

// src/plugins/my-plugin.js
export default {
  install(app, options) {
    app.config.globalProperties.$myProperty = 'Hello, Vue!';
  },
};

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/my-plugin';

const app = createApp(App);
app.use(MyPlugin);
app.mount('#app');

<!-- src/App.vue -->
<template>
  <div>{{ $myProperty }}</div>
</template>

Vue Router

Vue Router 是官方的路由管理器，用于创建单页应用（SPA）。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

<!-- src/App.vue -->
<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Vuex 状态管理

Vuex 是官方的状态管理模式，用于集中式管理应用的所有组件的状态。

// src/store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});

export default store;

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

<!-- src/App.vue -->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
  },
};
</script>

6. Vue 3 实践案例

Todo 应用

<!-- src/App.vue -->
<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a todo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <span :class="{ completed: todo.completed }" @click="toggleCompletion(todo)">
          {{ todo.text }}
        </span>
        <button @click="removeTodo(todo)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const todos = reactive([]);
    const newTodo = ref('');

    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.push({ id: Date.now(), text: newTodo.value, completed: false });
        newTodo.value = '';
      }
    };

    const toggleCompletion = (todo) => {
      todo.completed = !todo.completed;
    };

    const removeTodo = (todo) => {
      const index = todos.indexOf(todo);
      todos.splice(index, 1);
    };

    return {
      todos,
      newTodo,
      addTodo,
      toggleCompletion,
      removeTodo,
    };
  },
};
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

博客系统

由于篇幅原因，这里提供博客系统的简要说明和主要功能。

用户注册和登录：使用 Vuex 和 Vue Router 进行状态管理和路由导航。
文章发布和编辑：使用富文本编辑器（如 Quill）实现文章编辑功能。
评论系统：使用自定义组件和 Vuex 实现评论功能。
文章列表和详情页：使用 Vue Router 实现文章的路由和展示。

详细的代码实现可以参考 Vue 3 官方文档和相关教程。

7. 部署与优化

部署

将 Vue 3 应用部署到生产环境可以选择多种方式，如：

静态文件托管：使用 Vite 或 Vue CLI 构建工具生成静态文件，并部署到静态文件托管服务（如 GitHub Pages、Netlify、Vercel）。
云服务：将构建后的静态文件部署到云服务（如 AWS S3、Google Cloud Storage）并通过 CDN 进行分发。
容器化部署：使用 Docker 将应用容器化，并部署到容器服务（如 Docker Hub、Kubernetes）。

优化

优化 Vue 3 应用性能可以从以下几个方面入手：

代码分割：使用动态导入（dynamic import）和路由懒加载（lazy load）实现代码分割，减少初始加载时间。
懒加载图片：使用 Intersection Observer API 或第三方库（如 vue-lazyload）实现图片懒加载，提升页面加载性能。
压缩和最小化：使用构建工具（如 Vite、Webpack）进行代码压缩和最小化，减少文件体积。
CDN 分发：将静态资源（如图片、字体、第三方库）托管到 CDN，提高资源加载速度。

8. 总结

本指南涵盖了 Vue 3 的基础知识和高级特性，提供了详细的代码示例和实践案例，帮助你全面掌握 Vue 3 开发技能。通过不断学习和实践，你将能够开发出高性能、用户体验良好的单页应用（SPA），并在实际项目中灵活运用这些知识。