Vue3学习：从入门到初级实战指南

本文全面介绍了Vue3学习的内容，从Vue3的主要特点和与Vue2的区别入手，详细讲解了Vue3的安装与配置、项目搭建、组件化开发、响应式系统、路由管理和生命周期等关键知识点。通过本文，读者将快速掌握Vue3开发技能，并深入了解Vue3的各种新特性和最佳实践。

Vue3 是 Vue.js 的下一代版本，带来了许多重要改进和新特性，使其成为前端开发中的强大工具。以下是 Vue3 的主要特点：

1. 模板编译优化：Vue3 对模板进行静态提升，减少编译工作量，优化了渲染性能。
2. 组合式 API：引入了 setup 函数，可以更灵活地进行逻辑组合和代码重用。
3. Teleport：新的内置组件 Teleport，可以将子组件渲染到父组件之外的 DOM 节点上。
4. 更好的 TypeScript 支持：Vue3 更好地与 TypeScript 集成，提供类型推断支持。
5. Reactivity Transform：在编译时将响应式属性转换为 setup 函数参数，简化了响应式的声明。
6. 性能优化：Vue3 的核心逻辑被重写，使得应用在初始化和更新时更快。
7. 更好的错误处理：Vue3 对错误处理进行了改进，提供更详细的错误信息。
8. Tree-shaking：Vue3 的代码结构更适合使用 Tree-shaking，减少了打包体积。

Vue3 和 Vue2 都是 Vue.js 的主要版本，它们之间有许多重要的区别，影响了开发体验和应用性能。以下是 Vue3 和 Vue2 的主要区别：

1. Composition API：

   • Vue3 引入了 setup 函数，提供了组合式 API，使得逻辑更加模块化和可重用。
   • Vue2 主要依赖于 options API，通过 data、methods、computed 等选项来组织代码。

2. 性能提升：

   • Vue3 在编译和运行时进行了优化，提供了更好的性能和更快的加载时间。
   • Vue2 的模板编译和渲染效率较差，特别是在大型应用中。

3. 更好的 TypeScript 支持：

   • Vue3 与 TypeScript 更好地集成，支持类型推断和更好的类型检查。
   • Vue2 对 TypeScript 的支持较弱，类型检查和推断功能较弱。

4. 更好的错误处理：

   • Vue3 提供了更详细的错误信息，帮助开发者更容易地调试和解决问题。
   • Vue2 的错误处理机制较弱，错误信息不够详细。

5. Teleport 组件：

   • Vue3 提供了 Teleport 组件，可以将子组件渲染到父组件之外的 DOM 节点上。
   • Vue2 没有类似的内置组件，需要使用插件或自定义实现类似的功能。
6. Reactivity Transform：
   • Vue3 在编译时将响应式属性转换为 setup 函数参数，简化了响应式的声明。
   • Vue2 需要手动注册响应式属性，增加了开发复杂度。

安装 Vue3 之前，需要确保已经安装了 Node.js 和 npm/yarn。以下是 Vue3 的安装和配置步骤：

1. 创建 Vue3 项目

使用 Vue CLI 快速创建 Vue3 项目：

npm install -g @vue/cli
vue create my-vue3-project

在创建项目时，选择 Vue 3.x 版本：

Vue3 (official)

2. 安装依赖

在项目根目录下安装依赖：

cd my-vue3-project
npm install

3. 配置开发环境

编辑 vue.config.js 文件，配置项目环境：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-vue3-project/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: true,
  productionSourceMap: false,
  devServer: {
    port: 8080,
    open: true,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

4. 启动开发服务器

启动 Vue3 项目的开发服务器：

npm run serve

Vue CLI 提供了一种快速搭建 Vue3 项目的方法，通过 CLI 工具可以轻松创建和配置项目。

使用Vue CLI快速搭建Vue3项目

安装 Vue CLI：

npm install -g @vue/cli

创建新的 Vue3 项目：

vue create my-vue3-project

选择 Vue 3.x 版本：

Vue3 (official)

配置项目环境

在项目根目录下编辑 vue.config.js 文件，配置项目的环境变量和开发服务器设置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-vue3-project/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: true,
  productionSourceMap: false,
  devServer: {
    port: 8080,
    open: true,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

npm/yarn的使用

安装依赖：

npm install

或使用 yarn：

yarn install

启动开发服务器：

npm run serve

Vue3 支持组件化开发，使得代码更易于维护和复用。以下是组件的基本使用和属性传递的方法。

创建和使用组件

组件是 Vue 应用的基本构建块。创建组件需要在 .vue 文件中定义组件的结构、行为和数据。

<template>
  <div class="greeting">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Greeting',
  props: {
    message: String
  }
}
</script>

<style scoped>
.greeting {
  color: green;
}
</style>

组件的属性及事件传递

组件可以接收属性（props）和传递事件（emit）。

<template>
  <div>
    <ChildComponent v-bind:message="parentMessage" @child-event="handleEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleEvent(data) {
      console.log('Received event from child:', data);
    }
  }
}
</script>

深浅拷贝和响应式原理

在 Vue3 中，响应式系统是基于 Proxy 对象实现的。ref 和 reactive 是两个关键函数，用于创建响应式引用和对象。

深浅拷贝

深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是数据处理的基础概念。在实际应用中，浅拷贝仅浅层拷贝对象，修改子对象不会影响原始对象，而深拷贝则会完全复制对象及其子对象，确保原始对象不变。

浅拷贝：

const objA = { a: 1, b: { b1: 1 } };
const objB = { ...objA };
objB.b.b1 = 2;
console.log(objA.b.b1); // 输出：1

深拷贝：

const objA = { a: 1, b: { b1: 1 } };
const objB = JSON.parse(JSON.stringify(objA));
objB.b.b1 = 2;
console.log(objA.b.b1); // 输出：1

响应式原理

Vue3 使用 Proxy 对象来实现响应式，当数据发生变化时，Vue 可以自动触发视图更新。

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello'
});

state.message = 'World';
console.log(state.message); // 输出：World

实际应用案例

例如，在一个应用中，我们需要在父组件中传递数据给子组件，并在子组件中修改数据并返回给父组件。使用 Vue3 的响应式系统和事件机制可以很好地实现这一功能。

<template>
  <div>
    <ChildComponent v-bind:message="parentMessage" @child-event="handleEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleEvent(data) {
      console.log('Received event from child:', data);
    }
  }
}
</script>

Vue3 的响应式系统基于 Proxy 对象，提供了 ref 和 reactive 两种响应式数据类型。

响应式的基本原理

Vue3 使用 Proxy 对象来实现响应式，当数据发生变化时，Vue 可以自动触发视图更新。

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello'
});

state.message = 'World';
console.log(state.message); // 输出：World

使用ref和reactive

ref 用于创建一个包含响应式值的基本响应式引用。

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出：0
count.value++;
console.log(count.value); // 输出：1

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

import { reactive } from 'vue';

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

state.message = 'World';
console.log(state.message); // 输出：World
state.count++;
console.log(state.count); // 输出：1

计算属性与侦听器

计算属性（computed）和侦听器（watch）是处理复杂逻辑和数据变化的重要工具。

计算属性

计算属性基于响应式依赖进行缓存，只有当依赖发生变化时才会重新计算。

import { ref, computed } from 'vue';

const count = ref(0);

const even = computed(() => {
  return count.value % 2 === 0;
});

console.log(even.value); // 输出：true
count.value++;
console.log(even.value); // 输出：false

侦听器

侦听器（watch）用于监听响应式数据的变化，并在数据变化时执行回调。

import { ref, watch } from 'vue';

const count = ref(0);

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

count.value++;
console.log(count.value); // 输出：1

实际应用案例

例如，我们可以使用计算属性来实时计算数据变化。在某些场景下，我们需要根据多个响应式数据的组合来决定视图的显示逻辑，这时计算属性非常有用。

import { ref, computed } from 'vue';

const count = ref(0);

const even = computed(() => {
  return count.value % 2 === 0;
});

console.log(even.value); // 输出：true
count.value++;
console.log(even.value); // 输出：false

Vue3 通常与 Vue Router 结合使用，实现单页面应用（SPA）的路由管理。

安装和配置Vue Router

安装 Vue Router：

npm install vue-router@next

配置 Vue Router：

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;

在 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');

路由的基本使用

定义路由组件：

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

在模板中使用路由：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

路由的参数传递和守卫

传递路由参数：

const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

const User = {
  template: '<div>User id: {{ $route.params.id }}</div>'
};

使用路由守卫：

import { createRouter, createWebHistory } from 'vue-router';

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

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

router.beforeEach((to, from, next) => {
  console.log('Before each route guard');
  next();
});

router.beforeResolve((to, from, next) => {
  console.log('Before resolve route guard');
  next();
});

router.afterEach((to, from) => {
  console.log('After each route guard');
});

export default router;

实际应用案例

例如，在一个电商应用中，我们可以使用 Vue Router 来管理不同的商品页面，通过路由参数传递商品 ID，动态展示商品详情。

const routes = [
  {
    path: '/product/:id',
    component: ProductDetail
  }
];

const ProductDetail = {
  template: '<div>Product ID: {{ $route.params.id }}</div>'
};

Vue3 的生命周期是理解 Vue 应用行为的关键，它定义了组件在不同阶段的执行顺序和行为。

生命周期钩子的使用

Vue3 提供了多个生命周期钩子，用于在组件的不同生命周期阶段执行代码。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
}
</script>

生命周期的执行顺序

Vue3 的生命周期钩子按照以下顺序执行：

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeUnmount
8. unmounted

生命周期的应用场景

生命周期钩子可以用于执行各种操作，如数据初始化、DOM 操作、性能优化等。

1. 数据初始化：

   • created 钩子：在组件实例创建后执行，适合进行数据初始化。

   export default {
    data() {
      return {
        message: 'Hello'
      };
    },
    created() {
      console.log('Component created');
    }
   }

2. DOM 操作：

   • mounted 钩子：在组件挂载后执行，适合进行 DOM 操作。

   export default {
    mounted() {
      console.log('Component mounted');
      const element = document.querySelector('.my-element');
      console.log(element);
    }
   }

3. 性能优化：

   • beforeUpdate 和 updated 钩子：在组件更新前后执行，适合进行一些性能优化操作。

   export default {
    beforeUpdate() {
      console.log('Component before update');
    },
    updated() {
      console.log('Component updated');
    }
   }

通过理解 Vue3 的生命周期，可以更好地控制组件的行为，优化应用的性能和用户体验。