Vue3课程：新手入门到初级掌握

本文详细介绍了Vue3课程中的核心概念、组件化开发以及Composition API的使用，帮助新手快速入门并掌握Vue3的基本技能。文章还涵盖了Vue3的环境搭建、响应式系统、路由和状态管理等方面的知识，并通过实战项目讲解了如何将这些知识应用于实际开发中。

1.1 Vue3的核心概念

Vue3是Vue框架的最新版本，带来了许多新特性与改进。以下是Vue3的核心概念：

• 组件化开发：Vue3鼓励使用组件化的方式进行前端开发，每个组件都是一个独立的功能块，便于复用和维护。
• Composition API：这是一种新的API设计，通过setup函数来组织代码，使逻辑更加清晰。
• 响应式系统：Vue3的响应式系统更加高效，重新设计了底层的响应式实现，性能得到了提升。
• TypeScript支持：Vue3对TypeScript的支持更好，提供了完整的TypeScript类型定义，方便开发者进行类型检查和开发。

1.2 Vue3与Vue2的区别

为了更好地理解和使用Vue3，我们先来看看Vue3与Vue2的主要区别：

• 性能提升：Vue3通过实验性的Proxy对象实现了更好的响应式处理，提升了应用的性能。
• Composition API：Vue3引入了setup函数，使得代码更加模块化，组件逻辑更加清晰。
• Tree Shaking：Vue3优化了打包，使得未使用的代码可以被移除，减少了打包体积。
• HOISTED STATE：Vue3的响应式系统是被提升到组件的顶层作用域的，这样可以提高性能。
• 自定义渲染器：Vue3允许开发者自定义渲染器，可以应用于不同的渲染目标，如Web、Service Worker等。

1.3 安装Vue3环境

安装Vue3环境主要分为以下几步：

1. 全局安装npm：确保已经全局安装了npm。
2. 创建Vue3项目：使用Vue CLI来创建一个新的Vue3项目。
3. 本地开发环境配置：配置本地开发环境，如安装Webpack等。

安装步骤

1. 全局安装Vue CLI：

   npm install -g @vue/cli

2. 创建Vue3项目：

   vue create my-vue3-app

3. 配置本地开发环境：

   cd my-vue3-app
   npm run serve

通过以上步骤，就可以完成Vue3环境的安装和配置。

2.1 响应式基础

Vue3的响应式系统基于Proxy对象实现，相比Vue2的defineReactive和Observe，性能得到了提升。以下是一个简单的响应式数据绑定的例子：

import { reactive } from 'vue';

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

console.log(state.count); // 0
state.count++;
console.log(state.count); // 1

2.2 响应式数据绑定

在Vue3中，响应式数据绑定是通过ref和reactive两个函数完成的。

• ref：返回一个可变的引用类型，可以用来处理基本类型的响应式数据。
• reactive：返回一个响应式对象，适用于对象类型的响应式数据。

import { ref, reactive } from 'vue';

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

console.log(count.value); // 0
count.value++;
console.log(count.value); // 1

console.log(state.count); // 0
state.count++;
console.log(state.count); // 1

2.3 监听器与副作用

在Vue3中，watch和watchEffect是用于监听数据变化的主要API。

• watch：手动监听响应式数据的变化，可以返回一个回调函数，当数据发生变化时会执行这个回调。
• watchEffect：自动追踪依赖，当依赖变化时会重新执行副作用函数。

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

const count = ref(0);

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

watchEffect(() => {
  console.log(`count is: ${count.value}`);
});

count.value++;
// 输出：
// count changed from 0 to 1
// count is: 1

3.1 创建Vue3组件

在Vue3中，组件是通过defineComponent定义的。以下是一个简单的组件实例：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    return {
      count
    };
  }
});

3.2 使用Props和Slots

在Vue3中，组件可以通过props接收父组件传递的数据，通过slots实现动态内容插入。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :name="parentName" v-slot:default="{ name }">
    <p>Welcome {{ name }}</p>
  </ChildComponent>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentName: 'John'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <p>ChildComponent {{ name }} slot content: <slot :name="name"></slot></p>
</template>

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

3.3 插件的安装和使用

在Vue3中，可以通过Vue.use来安装和使用插件，例如Vue Router和Vuex。

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

import router from './router'; // 引入router配置

const app = createApp(App);

app.use(router); // 安装router插件

app.mount('#app');

3.4 Vue Router基础

Vue Router是Vue3的官方路由解决方案。以下是如何安装和配置Vue Router的基本步骤：

1. 安装Vue Router：

   npm install vue-router@next

2. 定义路由配置：

   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;

3. 在应用中使用路由：

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   
   const app = createApp(App);
   
   app.use(router);
   
   app.mount('#app');

3.5 Vuex状态管理

Vuex是Vue3的状态管理模式。以下是如何安装和配置Vuex的基本步骤：

1. 安装Vuex：

   npm install vuex@next

2. 定义状态管理器：

   import { createStore } from 'vuex';
   
   const store = createStore({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    }
   });
   
   export default store;

3. 在应用中使用Vuex：

   import { createApp } from 'vue';
   import App from './App.vue';
   import store from './store';
   
   const app = createApp(App);
   
   app.use(store);
   
   app.mount('#app');

4.1 setup函数

setup函数是Composition API的核心。它是一个集中管理组件逻辑的地方，可以方便地组织和复用逻辑代码。

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const doubleCount = computed(() => count.value * 2);

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

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

4.2 Ref和Computed属性

• ref：用于创建响应式变量。
• computed：用于创建计算属性，可以基于其他响应式数据自动计算得出。

import { ref, computed } from 'vue';

const count = ref(0);

const doubleCount = computed(() => count.value * 2);

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

4.3 使用生命周期钩子

在Vue3中，生命周期钩子可以通过onMounted、onUnmounted等函数来使用。

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });

    return {
      count
    };
  }
};

5.1 Router与Vuex集成

通过配置路由和状态管理器，可以在路由切换时自动触发状态管理器中的某些逻辑。

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

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

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

router.beforeEach((to, from, next) => {
  if (to.path === '/about') {
    store.commit('increment');
  }
  next();
});

export default router;

6.1 创建简单的Vue3项目

可以按照以下步骤创建一个简单的Vue3项目：

1. 初始化项目：

   vue create my-vue3-app

2. 安装依赖：

   npm install vue-router@next vuex@next

3. 配置路由和状态管理：

   // 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;

   // store/index.js
   import { createStore } from 'vuex';
   
   const store = createStore({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    }
   });
   
   export default store;

4. 创建组件和页面：

   <!-- src/views/Home.vue -->
   <template>
    <div>
      <h1>Home</h1>
      <router-link to="/about">Go to About</router-link>
    </div>
   </template>
   
   <!-- src/views/About.vue -->
   <template>
    <div>
      <h1>About</h1>
      <p>Count: {{ $store.state.count }}</p>
    </div>
   </template>

5. 在主应用中配置路由和状态管理：

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   import store from './store';
   
   const app = createApp(App);
   
   app.use(router);
   app.use(store);
   
   app.mount('#app');

6.2 常见问题及解决方法

在Vue3开发过程中，可能会遇到一些常见问题，以下是一些常见的问题及解决方案：

• Cannot read properties of undefined (reading 'xxx')：确保响应式数据已经被正确初始化。
• TypeError: Cannot read properties of null (reading 'xxx')：检查是否正确传递props和slots。
• Cannot set property 'xxx' of undefined：确保ref和reactive的对象已经被正确创建。
• Vue Router导航守卫无法触发：确保导航守卫正确配置，并且路径匹配正确。

6.3 项目部署与维护

部署Vue3项目可以通过以下步骤：

1. 构建项目：

   npm run build

2. 部署到服务器：

   将生成的dist文件夹内容部署到服务器，例如使用Nginx或Apache。

   server {
    listen 80;
    server_name example.com;
    root /path/to/dist;
   
    location / {
      try_files $uri /index.html;
    }
   }

3. 持续集成与持续部署（CI/CD）：

   使用如GitHub Actions或Jenkins等工具实现自动构建和部署。