Vue3 考点详解：新手入门教程

概述

Vue3 是 Vue.js 的最新版本，它在性能、API 精简、TypeScript 支持等方面进行了改进和优化，包含 Composition API 等重要特性。本文将详细介绍 Vue3 的安装配置、主要特性、基本语法、组件化开发、路由与状态管理以及调试与测试方法，帮助读者掌握 Vue3 的核心考点。

Vue3 基础概念介绍 Vue3 概述

Vue.js 是一款渐进式的 JavaScript 框架，它的设计目标是易于上手，同时能够构建复杂的应用。Vue3 是 Vue.js 的最新版本，它在性能、API 精简、TypeScript 支持等方面进行了改进和优化。

Vue3 的一些主要特性包括：

1. 更好的性能：通过编译器优化、改进的响应式系统和更高效的渲染机制，Vue3 在相同硬件条件下比 Vue2 更快。
2. 更小的体积：默认情况下，Vue3 的体积比 Vue2 更小，这使得它更适合移动端开发。
3. 更强的配置灵活性：Vue3 提供了更灵活的配置选项，使得开发者可以根据项目需求进行更细粒度的配置。
4. 更好的 TypeScript 支持：Vue3 的核心库完全使用 TypeScript 编写，这使得开发者可以更容易地利用 TypeScript 的静态类型检查功能。
5. Composition API：Vue3 引入了 Composition API，这是一个新的 API 设计模式，用来替代之前基于选项的对象式 API，使得代码逻辑更加清晰，尤其是在复杂的组件中。

Vue3 安装与配置

为了使用 Vue3，首先需要安装它。可以通过 npm 来安装 Vue3。在命令行中运行以下命令：

npm install vue@next

安装完成后，可以在项目中引入并使用 Vue3。下面是一个简单的示例，展示如何在项目中使用 Vue3：

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
});

app.mount('#app');

同时，如果要使用 Vue3 的完整功能，还需要创建一个 Vue3 项目。

Vue3 基于 CLI (Command Line Interface)，通过 Vue CLI 可以快速生成项目模板。安装 Vue CLI：

npm install -g @vue/cli

创建一个 Vue3 项目：

vue create my-vue3-project

在项目生成的过程中，选择 Vue3 作为版本。

初始化项目后，可以通过以下命令启动开发服务器：

npm run serve

Vue3 的主要特性

Composition API

Composition API 是 Vue3 中引入的一个新特性，它允许开发者以一种更灵活的方式组织和重用组件逻辑。Composition API 可以将相关逻辑组织成独立的逻辑单元，称为“组合函数”，并在组件中直接使用。

下面是一个使用 Composition API 的简单示例：

import { reactive, computed } from 'vue';

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

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

    const doubleCount = computed(() => {
      return state.count * 2;
    });

    return {
      count: state.count,
      increment,
      doubleCount
    };
  }
};

更小的体积与更好的性能

Vue3 的体积更小，性能更佳。这是通过优化编译器和改进响应式系统实现的。

更强的配置灵活性

Vue3 提供了更灵活的配置选项。例如，可以配置 Vue 的模板解析器、全局组件和指令等。

Vue3 的基本语法 模板语法

Vue3 的模板语法主要用于描述用户界面，它将 HTML 和一些特殊语法结合起来。Vue3 支持常见的模板语法，如插值、指令、事件处理等。

插值

插值是使用双大括号 ({{ }}) 来插入数据到模板中的语法。插值会被编译成 {message} 的形式，其中 message 是定义在组件或 Vue 实例中的数据属性。

<div id="app">
  <span>Hello, {{ name }}</span>
</div>

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      name: 'World'
    };
  }
});

app.mount('#app');

指令

Vue3 中的指令是特殊的 HTML 属性，用于在模板中定义行为。以下是一些常用的指令：

• v-if：条件渲染。
• v-for：列表渲染。
• v-bind：动态绑定属性。
• v-on：事件监听。

<div id="app">
  <div v-if="show">显示文本</div>
  <div v-for="item in items" :key="item.id">{{ item.title }}</div>
  <a v-bind:href="url">链接到{{ url }}</a>
  <button v-on:click="handleClick">点击</button>
</div>

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      show: true,
      items: [
        { id: 1, title: 'Item 1' },
        { id: 2, title: 'Item 2' }
      ],
      url: 'https://example.com'
    };
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
});

app.mount('#app');

条件渲染

使用 v-if 或 v-show 指令来控制元素的显示和隐藏。

<div id="app">
  <div v-if="show">显示文本</div>
  <div v-show="show">显示文本</div>
</div>

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      show: true
    };
  }
});

app.mount('#app');

列表渲染

使用 v-for 指令来遍历数组或对象。

<div id="app">
  <div v-for="item in items" :key="item.id">
    {{ item.title }}
  </div>
</div>

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      items: [
        { id: 1, title: 'Item 1' },
        { id: 2, title: 'Item 2' }
      ]
    };
  }
});

app.mount('#app');

事件处理

使用 v-on 指令来监听事件。

<div id="app">
  <button v-on:click="handleClick">点击</button>
</div>

import { createApp } from 'vue';

const app = createApp({
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
});

app.mount('#app');

计算属性与方法

计算属性

计算属性是基于其依赖的数据动态计算得出的结果。计算属性是通过 computed 属性来定义的。

<div id="app">
  <p>原始值: {{ originalValue }}</p>
  <p>计算后的值: {{ computedValue }}</p>
</div>

import { createApp, computed } from 'vue';

const app = createApp({
  data() {
    return {
      originalValue: 5
    };
  },
  computed: {
    computedValue() {
      return this.originalValue * 2;
    }
  }
});

app.mount('#app');

方法

方法是组件中的一个普通函数。它们可以被绑定到事件处理器上，或者在模板中调用。

<div id="app">
  <button v-on:click="handleClick">点击</button>
</div>

import { createApp } from 'vue';

const app = createApp({
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
});

app.mount('#app');

Vue3 组件化开发 组件基础

Vue3 的组件化开发是构建大型应用的关键。组件是可重用的 Vue 实例，可以在应用中独立地定义和使用。

定义组件

组件可以通过 JavaScript 对象的形式定义。

import { createApp, defineComponent } from 'vue';

const MyComponent = defineComponent({
  template: '<div>这是我的组件</div>'
});

const app = createApp({
  components: {
    MyComponent
  }
});

app.mount('#app');

使用组件

在模板中使用自定义组件，需要先注册组件。

<div id="app">
  <my-component></my-component>
</div>

import { createApp, defineComponent } from 'vue';

const MyComponent = defineComponent({
  template: '<div>这是我的组件</div>'
});

const app = createApp({
  components: {
    MyComponent
  }
});

app.mount('#app');

组件间的通信

在 Vue3 中，组件之间可以通过父组件向子组件传递数据，或者通过事件系统在组件之间传递数据。

父组件向子组件传递数据

通过 props 来传递数据。

<div id="app">
  <child-component :message="parentMessage"></child-component>
</div>

import { createApp, defineComponent } from 'vue';

const ChildComponent = defineComponent({
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

const app = createApp({
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
});

app.mount('#app');

子组件向父组件传递数据

通过 v-on 事件修饰符来传递数据。

<div id="app">
  <child-component @child-event="handleChildEvent"></child-component>
</div>

import { createApp, defineComponent } from 'vue';

const ChildComponent = defineComponent({
  template: '<button @click="sendEvent">点击</button>',
  methods: {
    sendEvent() {
      this.$emit('child-event', 'Hello from child');
    }
  }
});

const app = createApp({
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(message) {
      console.log(message);
    }
  }
});

app.mount('#app');

插槽（Slot）的使用

插槽允许组件内部定义可插槽的区块，从而可以灵活地控制组件的内容。

基本使用

<my-component>
  <h1 slot="header">头部内容</h1>
  <p>中间内容</p>
  <footer slot="footer">底部内容</footer>
</my-component>

import { createApp, defineComponent } from 'vue';

const MyComponent = defineComponent({
  template: `
    <div>
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
});

const app = createApp({
  components: {
    MyComponent
  }
});

app.mount('#app');

Vue3 的响应式系统 响应式原理

Vue3 的响应式系统基于 Proxy 对象。通过在创建响应式对象时使用 Proxy 对象，Vue3 可以监视数据的变化，并在数据发生变化时自动更新视图。

Proxy 对象

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

data.count++;

监听数据变化

import { createApp, reactive, watch } from 'vue';

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

    watch(() => state.count, (newValue, oldValue) => {
      console.log(`count 从 ${oldValue} 变为 ${newValue}`);
    });

    return { count: state.count };
  }
});

app.mount('#app');

Ref 与 Reactive 的使用

Ref

ref 是一个可以修改其内部值的对象，通常用于基本类型值。

import { ref } from 'vue';

const count = ref(0);

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

Reactive

reactive 是一个可以修改其内部属性的对象，通常用于复杂的数据结构。

import { reactive } from 'vue';

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

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

响应式生命周期

Vue3 提供了 onBeforeUpdate 和 onUpdated 生命周期钩子，可以在组件更新前和更新后执行相应的操作。

import { createApp, onBeforeUpdate, onUpdated } from 'vue';

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

    onBeforeUpdate(() => {
      console.log('组件即将更新');
    });

    onUpdated(() => {
      console.log('组件已更新');
    });

    return { count: state.count };
  }
});

app.mount('#app');

Vue3 的路由与状态管理 Vue Router 基本使用

Vue Router 是 Vue3 官方提供的路由解决方案。它允许开发者定义 URL 路径和视图组件之间的映射关系。

安装 Vue Router

npm install vue-router@next

定义路由配置

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

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

export default router;

在 Vue3 项目中使用路由

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

const app = createApp(App);

app.use(router);

app.mount('#app');

路由跳转

<router-link to="/about">到 About 页面</router-link>

动态路由

const routes: Array<RouteRecordRaw> = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
];

Vuex 状态管理

Vuex 是 Vue3 官方提供的状态管理库，用于管理应用的状态。

安装 Vuex

npm install vuex@next

定义 Store

import { createStore } from 'vuex';

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

export default store;

在 Vue3 项目中使用 Vuex

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

const app = createApp(App);

app.use(store);

app.mount('#app');

在组件中使用 Vuex

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">点击</button>
</div>

import { createApp, computed } from 'vue';
import store from './store';

const app = createApp({
  setup() {
    const count = computed(() => store.state.count);
    const increment = () => store.dispatch('increment');
    return { count, increment };
  }
});

app.use(store);

app.mount('#app');

高级路由配置与状态管理技巧

设置动态路由

const routes: Array<RouteRecordRaw> = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    props: true
  }
];

路由守卫

router.beforeEach((to, from, next) => {
  if (to.meta.needAuth) {
    if (store.state.isAuthenticated) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

Vuex 模块化

const modules = {
  module1: {
    state() {
      return {
        count: 0
      };
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    },
    actions: {
      increment({ commit }) {
        commit('increment');
      }
    }
  }
};

const store = createStore({
  modules: modules
});

实践与调试 调试工具介绍

Vue3 提供了一些调试工具，如 Vue Devtools，可以帮助开发者调试 Vue3 应用。

Vue Devtools

Vue Devtools 是一个 Chrome 扩展，它可以帮助开发者调试 Vue 应用，查看组件树、状态管理等。

Vue3 自带的调试模式

import { createApp } from 'vue';

const app = createApp({
  setup() {
    console.log('app setup');
  }
});

app.mount('#app');

测试 Vue3 应用

Vue3 应用可以通过单元测试、集成测试和端对端测试来保证应用的质量。

单元测试

import { describe, it, expect } from '@jest/globals';
import { ref } from 'vue';

describe('ref 测试', () => {
  it('可以修改值', () => {
    const count = ref(0);
    count.value++;
    expect(count.value).toBe(1);
  });
});

集成测试

import { describe, it, expect } from '@jest/globals';
import { shallowMount } from '@vue/test-utils';
import App from './App.vue';

describe('App.vue', () => {
  it('点击按钮后 count 增加', () => {
    const wrapper = shallowMount(App);
    const count = wrapper.vm.count;
    wrapper.find('button').trigger('click');
    expect(wrapper.vm.count).toBe(count + 1);
  });
});

端对端测试

import { describe, it, expect } from '@jest/globals';
import { createBrowser } from 'puppeteer';

describe('端对端测试', () => {
  it('点击按钮后 count 增加', async () => {
    const browser = await createBrowser();
    const page = await browser.newPage();
    await page.goto('http://localhost:8080');
    await page.click('button');
    await page.waitForTimeout(1000);
    const count = await page.evaluate(() => document.body.textContent);
    expect(count).toContain('1');
    await browser.close();
  });
});

常见问题与解决方案

问题：组件数据变化了，但视图没有更新

• 确保数据是响应式的，使用 ref 或 reactive。
• 确保数据更新的地方使用了正确的语法和方法。

问题：组件内部数据不能更新

• 检查组件的 setup 函数是否正确返回了需要的数据。
• 确保组件内部的状态更新逻辑是正确的。

问题：路由跳转无效

• 检查路由配置是否正确。
• 确保路由的 name 与 path 是一致的。
• 确保路由守卫没有阻止路由跳转。

问题：Vuex 状态更新无效

• 检查 Vuex Store 的定义是否正确。
• 确保在组件中正确使用了 Vuex 的状态和方法。

问题：调试工具没有显示组件树

• 确保已经安装并启用了 Vue Devtools。
• 确保应用没有被 minify 或混淆，否则无法正确显示组件树。

问题：测试用例失败

• 确保测试用例的代码逻辑是正确的。
• 检查测试环境是否配置正确，确保所有依赖都已安装。

通过以上内容，你已经了解了 Vue3 的基础概念、语法、组件化开发、响应式系统、路由与状态管理，以及调试与测试的方法。希望这些内容能帮助你更好地掌握 Vue3，构建更高质量的应用。