从零开始：Vue3学习全攻略

本文详细介绍了Vue3的基础概念和环境搭建，包括安装Node.js和npm、创建Vue3项目以及使用Vue CLI。文章还涵盖了Vue3的路由、状态管理和项目部署等内容，帮助读者全面了解和掌握Vue3学习。

Vue3基础概念及环境搭建 Vue3简介

Vue.js 是一个用于构建用户界面的渐进式框架。它提供了完整的工具链以构建可维护的单页面应用程序，同时保持了轻量级和可组合的特性。Vue 3 是 Vue.js 的最新版本，发布于 2020 年 9 月，带来了更好的性能、更小的体积、TypeScript 支持等新特性。

安装Node.js及npm

为了能够使用 Vue CLI 来创建 Vue 项目，首先需要安装 Node.js 和 npm（Node 包管理器）：

1. 访问Node.js官网下载对应版本的 Node.js。
2. 安装完成后，在命令行中运行 node -v 和 npm -v 来验证安装是否成功，验证结果应显示具体的版本号。

创建Vue3项目

使用 Vue CLI 可以很容易地创建一个新的 Vue 项目。

1. 安装 Vue CLI：

   npm install -g @vue/cli

2. 创建新项目：

   vue create my-vue-app

3. 选择 Vue 3：
   在选择预设选项时，选择 "Manually select features"，然后选择 Vue 3。

Vue CLI安装与使用

Vue CLI 是 Vue.js 的官方脚手架工具，它提供了快速启动项目、预设模版、构建优化等功能，帮助开发者更高效地开发 Vue 项目。

安装Vue CLI

安装 Vue CLI 如上文所述，使用 npm install -g @vue/cli 命令全局安装 Vue CLI。

使用Vue CLI

1. 使用 Vue CLI 创建项目：

   vue create my-vue-app

   按照提示选择 Vue 3 版本。

2. 使用 Vue CLI 生成组件或页面：

   vue add component

   或者

   vue add page

Hello World示例

创建完项目后，可以在 src 文件夹下的 App.vue 文件中添加以下内容：

<template>
  <div id="app">
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

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

在 main.js 中引入并使用该组件：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Vue3项目结构与组件化开发

项目文件结构解析

标准的 Vue 项目结构如下：

• public/：存放静态文件（如 index.html），不会被 webpack 打包。
• src/：源代码，主要包括 main.js、App.vue、components/ 等。
• assets/：存放静态资源，如图片。
• components/：存放 Vue 组件。
• views/：存放视图组件。
• router/：存放路由配置。
• store/：存放 Vuex 状态管理相关的代码。
• mock/：存放模拟数据。
• tests/：存放测试文件。
• styles/：存放样式文件。
• utils/：存放工具函数。

Vue组件的基本构成

Vue 组件是 Vue 应用最基本的构建单元。组件本质上是一个独立的、可复用的 Vue 实例，有独立的挂载点和响应式状态。

// components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ numberOfComponents }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    count: Number,
  },
  data() {
    return {
      numberOfComponents: 0,
    };
  },
  created() {
    this.numberOfComponents++;
  },
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

父子组件通信

父子组件通信主要通过 Props 和事件：

<!-- 父组件 -->
<template>
  <div>
    <child-component msg="Hello from parent" @increase="handleIncrease"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleIncrease() {
      console.log('Count increased');
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="emitIncreaseEvent">Increase</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['msg'],
  methods: {
    emitIncreaseEvent() {
      this.$emit('increase');
    },
  },
};
</script>

兄弟组件通信

兄弟组件之间没有直接的 Props 或 Events 通信，可以通过共同的父组件来传递信息：

<!-- 父组件 -->
<template>
  <div>
    <child-one @update="updateMessage"></child-one>
    <child-two :message="message"></child-two>
  </div>
</template>

<script>
import ChildOne from './ChildOne.vue';
import ChildTwo from './ChildTwo.vue';

export default {
  components: {
    ChildOne,
    ChildTwo,
  },
  data() {
    return {
      message: '',
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    },
  },
};
</script>

<!-- 子组件 ChildOne -->
<template>
  <div>
    <input type="text" @input="updateMessage" />
  </div>
</template>

<script>
export default {
  name: 'ChildOne',
  props: [],
  methods: {
    updateMessage(event) {
      this.$emit('update', event.target.value);
    },
  },
};
</script>

<!-- 子组件 ChildTwo -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildTwo',
  props: ['message'],
};
</script>

抽象组件与Slot插槽

Slot 插槽可以让你在渲染组件时可以将内容插入到自定义位置：

<!-- 母组件 -->
<template>
  <div>
    <slot-component>
      <p>Default content</p>
    </slot-component>
  </div>
</template>

<script>
import SlotComponent from './SlotComponent.vue';

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

<!-- SlotComponent.vue -->
<template>
  <div>
    <header>
      <slot></slot>
    </header>
  </div>
</template>

<script>
export default {
  name: 'SlotComponent',
};
</script>

Vue3响应式原理及数据绑定

响应式系统介绍

Vue 使用了一种叫做“代理”的机制来实现数据响应式。当数据发生变化时，会触发视图更新。Vue 3 通过 Proxy 替换了 Vue 2 的 Object.defineProperty，大大提高了性能。

数据绑定方法

数据绑定可以通过 v-bind 和 v-model 指令实现。例如：

<!-- v-bind 绑定属性 -->
<div :class="dynamicClass">Bound class</div>

<!-- v-model 绑定输入框 -->
<input v-model="user.name" />

响应式对象的创建

使用 reactive 函数可以创建响应式对象：

import { reactive } from 'vue';

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

console.log(state.count);  // 输出：0

响应式原理剖析

Vue 3 的响应式系统主要通过 Proxy 实现，它允许拦截和劫持某些操作，如属性的读取、赋值等。当这些操作发生时，Vue 会自动更新视图。例如：

const proxy = new Proxy({}, {
  get(target, key) {
    console.log(`Getting ${key}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`Setting ${key} to ${value}`);
    target[key] = value;
  },
});

proxy.count = 1;  // 输出：Setting count to 1
console.log(proxy.count);  // 输出：Getting count, 1

Vue3指令与事件处理

常见指令使用

Vue 提供了多种内置指令，如 v-if、v-show、v-for、v-on、v-bind 等。

<!-- v-if -->
<div v-if="visible">Conditional</div>

<!-- v-show -->
<div v-show="visible">Conditional</div>

<!-- v-for -->
<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

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

<!-- v-bind -->
<div :class="dynamicClass">Bound class</div>

自定义指令

自定义指令可以用于在 Vue 实例中添加自定义行为：

// 自定义指令
Vue.directive('focus', {
  inserted(el) {
    el.focus();
  },
});

// 使用指令
<input v-focus />

事件绑定与修饰符

事件绑定使用 v-on 指令，可以使用修饰符来限制事件处理：

<!-- 事件修饰符 -->
<button v-on:click.stop="handleClick">Click me</button>

防抖与节流

防抖和节流是常见的性能优化技术：

// 防抖
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 节流
function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime < delay) {
      return;
    }
    func.apply(this, args);
    lastTime = now;
  };
}

Vue3路由与状态管理

Vue Router基础配置

Vue Router 是 Vue.js 官方的路由库。例如：

// 引入路由包
import { createRouter, createWebHistory } from 'vue-router';

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

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 导出路由
export default router;

路由参数与查询参数

路由参数通过 params 传递，查询参数通过 query 传递：

// 使用params
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/user/:id', component: User },
  ],
});

// 使用query
router.push({ path: '/user', query: { id: 123 } });

路由守卫与导航守卫

路由守卫用于控制路由的导航行为：

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

// 路由组件内的导航守卫
export default {
  beforeRouteEnter(to, from, next) {
    next();
  },
  beforeRouteUpdate(to, from, next) {
    next();
  },
};

Vuex状态管理库使用

Vuex 是 Vue.js 的状态管理库。例如：

// 安装Vuex
npm install vuex --save

// 引入和使用Vuex
import { createStore } from 'vuex';

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

Vuex工作原理

Vuex 通过 state、mutations、actions 和 getters 来管理应用状态。state 存储应用数据，mutations 负责修改状态，actions 提供异步操作，getters 提供计算属性：

// state 存储数据
const state = {
  count: 0,
};

// mutations 修改状态
const mutations = {
  increment(state) {
    state.count++;
  },
};

// actions 提供异步操作
const actions = {
  increment({ commit }) {
    commit('increment');
  },
};

// getters 提供计算属性
const getters = {
  doubleCount(state) {
    return state.count * 2;
  },
};

Vue3项目部署与常见问题解决

代码打包与部署

使用 Vue CLI 的 npm run build 命令生成生产环境的代码：

npm run build

常见问题解析

• 打包后在服务器上运行时，部分资源未加载：检查服务器配置，确保所有静态文件路径正确。
• 打包后的文件体积过大：优化代码结构，使用压缩工具压缩文件。
• 浏览器兼容问题：使用 Babel 进行转译，确保兼容性。

项目优化与调试技巧

• 使用 Vue Devtools 进行调试。
• 添加环境变量，区分开发环境和生产环境。
• 使用 webpack 进行代码分割，提高加载速度。
• 使用 PWA 技术，增强应用性能。

Vue3和旧版本兼容性问题

• Vue 2 和 Vue 3 的 API 有所区别：使用 Vue 3 的 API，如 Composition API。
• 组件的生命周期钩子不同：使用 onMounted、onUnmounted 等组合式 API。
• TypeScript 支持：Vue 3 完全支持 TypeScript，可以在项目中使用。

通过以上步骤和示例，您可以快速搭建和运行一个 Vue 3 项目，并解决常见的问题。希望这篇教程对您有所帮助。