Vue 3基础知识快速入门

Vue 3基础知识快速入门

• • 1. Vue 3 概述
  • 2. 环境搭建
  • 3. Vue 3 项目结构
  • 4. 基础语法
  • 5. 组合式API
  • 6. 组件基础
  • 7. 组件通信
  • 8. 动态与异步组件
  • 9. 计算属性和侦听器
  • 10. 生命周期钩子
  • 11. 路由与状态管理
  • 12. 类型化开发
  • 13. 调试与测试
  • 14. 实战演练
  • 15. 持续学习

1. Vue 3 概述

Vue 3是渐进式的JavaScript框架，它让构建用户界面变得既简单又强大。新特性比如组合式API，让代码组织更灵活；还有对TypeScript的支持，让静态类型检查变得容易。

• 官网： https://cn.vuejs.org/
  

• Vue3js.cn（非官方，Vue 3的学习资源聚合网站）： https://vue3js.cn/
  

2. 环境搭建

在你开始大冒险之前，得确保你的武器库（开发环境）已经准备好了。安装Node.js，然后选择Vue CLI或Vite来创建你的Vue 3项目。

创建Vue 3项目的例子：

# 使用Vue CLI创建项目
vue create my-vue-app
 
# 或者使用Vite
npm create vite@latest my-vue-app -- --template vue-ts复制

3. Vue 3 项目结构

每个Vue 3项目都像一个小城镇，有它自己的布局。主要的部件包括src文件夹，里面有components（组件）、views（视图）、router（路由）等。

4. 基础语法

模板语法是Vue的超级力量，让你能够把数据和逻辑直接写进HTML。

模板语法的例子：

<template>
  <div>{{ message }}</div>
  <button v-on:click="counter++">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      counter: 0
    };
  }
}
</script>
复制

5. 组合式API

setup函数是Vue 3的新招式，它是组合式API的中心舞台。

组合式API的例子：

import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
    onMounted(() => console.log('Component is mounted'));
 
    return { count };
  }
};复制

6. 组件基础

组件就像是Vue的乐高积木，你可以用它们搭建任何东西。

定义组件的例子：

<template>
  <h1>{{ title }}</h1>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      title: 'My Component'
    };
  }
});
</script>
复制

7. 组件通信

组件间通信就像是组件们在说悄悄话。Props用于父子间，事件用于更广范围。

组件通信的例子：

<!-- Child.vue -->
<template>
  <h1 :title="msg">{{ msg }}</h1>
</template>

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

<!-- Parent.vue -->
<template>
  <ChildComponent :msg="parentMsg" @update:msg="parentMsg = $event" />
</template>

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

export default {
  data() {
    return {
      parentMsg: 'Hello from parent'
    };
  }
};
</script>
复制

8. 动态与异步组件

动态组件就像是变形金刚，可以根据需要变换形态。

动态组件的例子：

<template>
  <component :is="currentComponent" />
</template>

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

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

9. 计算属性和侦听器

计算属性就像是超级智能的计算器，而侦听器就像是你的私人侦探，帮你盯着数据的变化。

计算属性和侦听器的例子：

import { ref, computed, watch } from 'vue';
 
const count = ref(0);
const doubledCount = computed(() => count.value * 2);
watch(count, (newValue) => console.log(`Count is now: ${newValue}`));
 
// 试着改变count的值，看看doubledCount和控制台输出的变化复制

10. 生命周期钩子

生命周期钩子就像是生命周期中的关键时刻，你可以在这些时刻做特定的操作。

生命周期钩子的例子：

import { onMounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => console.log('The component is mounted!'));
    
    return {};
  }
};复制

11. 路由与状态管理

Vue Router和Vuex是Vue的两个超能力小伙伴，帮你管理路由和应用状态。

Vue Router的例子：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
 
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    // ...其他路由
  ]
});
 
export default router;复制

12. 类型化开发

TypeScript是Vue 3的好朋友，帮你提前发现错误。

TypeScript的例子：

import { defineComponent, ref } from 'vue';
 
interface Person {
  name: string;
  age: number;
}
 
export default defineComponent({
  setup() {
    const person = ref<Person | null>(null);
 
    // TypeScript会确保person是Person类型或null
    person.value = { name: 'John Doe', age: 30 };
 
    return { person };
  }
});复制

13. 调试与测试

调试和测试就像是给你的应用做体检，确保它健康运行。

单元测试的例子（使用Vitest）：

import { describe, it, expect } from 'vitest';
import { sum } from '../src/utils';
 
describe('sum function', () => {
  it('adds 1 + 1 to equal 2', () => {
    expect(sum(1, 1)).toBe(2);
  });
 
  // 可以添加更多的测试案例
});复制

14. 实战演练

通过构建小型应用，比如待办事项列表或者天气应用，将所学知识付诸实践。

15. 持续学习

Vue的社区非常活跃，加入社区，比如Vue Discord服务器，可以帮助你更快地学习和解决问题。