Vue3学习：初学者指南-原创手记-慕课网

概述

Vue3是Vue.js的最新版本，提供了更高效和灵活的API，增强了性能和可维护性。学习Vue3不仅可以让你掌握最新的前端开发技术，还可以利用其特性优化应用的性能和可维护性。此外，Vue3提供了更多的灵活性和控制能力，使得开发过程更加高效。此外，掌握Vue3可以让你更好地适应未来前端技术的发展趋势。

Vue3简介

什么是Vue3

Vue3是Vue.js的最新版本，它是在Vue2基础之上进行的一次重大升级。Vue3提供了更高效、更灵活的API，增强了性能和可维护性，同时保持了与Vue2的兼容性，使得开发者能够轻松地从Vue2过渡到Vue3。

为什么学习Vue3

学习Vue3可以让你掌握最新的前端开发技术，利用Vue3的特性优化应用的性能和可维护性。此外，Vue3提供了更多的灵活性和控制能力，使得开发过程更加高效。掌握Vue3还可以让你更好地适应未来前端技术的发展趋势。

Vue3的主要特点

Composition API：提供了更灵活和更强大的API来管理和组织逻辑，使得逻辑的维护更加清晰。
Teleport：允许组件的内容渲染到DOM中的其他位置。
Fragments：允许在同一个父组件中拥有多个根元素。
更好的响应式性能：Vue3在优化响应式系统方面做了很多工作，特别是在读取和写入属性时提供了更好的性能。
Tree Shaking：确保未使用的代码不会被包含在最终的构建文件中，从而减小了体积。
更小的体积：Vue3的体积比Vue2小，这使得应用的加载速度更快。
更好的开发体验：Vue3对开发者体验进行了多项改进，例如更友好的错误信息、更快速的启动速度等。

环境搭建

安装Node.js和npm

在开始Vue3的学习之前，你需要确保你的开发环境已经安装了Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，npm是Node.js的包管理工具。你可以访问Node.js官网下载并安装Node.js，安装完成后，npm也会一并安装。

创建Vue3项目

安装了Node.js和npm后，你可以使用Vue CLI（Vue命令行工具）来创建一个新的Vue3项目。Vue CLI是一个命令行工具，可以快速搭建Vue项目，它集成了一系列的预设配置，使得项目初始化变得非常简单。

使用命令行工具，首先确保已安装Vue CLI，如果没有安装，可以通过以下命令进行安装：

npm install -g @vue/cli

安装完成后，创建一个新的Vue3项目：

vue create my-vue3-app

在创建项目时，Vue CLI会询问你是否要使用默认的预设配置，或者自定义配置。选择Vue3作为预设配置后，可以自定义安装Vue3项目。例如，你可以选择不安装一些不必要的依赖，或者选择特定的Vue CLI插件。

执行上述命令后，Vue CLI会询问你是否要在项目中使用Vue3，选择使用Vue3后，项目将被创建并初始化。

项目目录结构介绍

Vue CLI创建的Vue3项目的目录结构大致如下：

my-vue3-app/
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── logo.png
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
└── vite.config.js

.gitignore：Git仓库忽略的文件列表。
babel.config.js：配置Babel的文件，用于将ES6+代码转换为ES5代码。
package.json：项目的基本信息和依赖列表。
README.md：项目说明文件。
public/：存放公共资源文件，如HTML和图片。
src/：项目的主要代码目录，包括组件、样式等。
vite.config.js：Vite配置文件，用于优化构建过程。

实际项目示例

假设我们创建了一个简单的Vue3应用来展示环境搭建后的效果，应用将显示一个简单的计数器。

首先，确保你的项目结构和文件内容如下：

my-vue3-app/
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── logo.png
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
└── vite.config.js

在src/App.vue中，编写一个简单的计数器组件：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
};
</script>

在src/main.js中，导入并实例化Vue应用：

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

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

运行项目：

npm run serve

打开浏览器并访问localhost:8080，你应该能看到一个简单的计数器应用。

基础语法

数据绑定

数据绑定是Vue3的核心功能之一，它允许你在HTML模板中直接引用Vue实例的数据，当数据发生变化时，页面会自动更新。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
}
</script>

在这个例子中，{{ message }}是一个插值表达式，它会在页面上显示message变量的值。当你修改message变量时，页面会自动更新。

计算属性与方法

计算属性与方法都是在Vue实例中定义的函数，它们都可以用来在模板中直接使用，但是它们之间有一些重要的区别。

计算属性：计算属性是基于数据依赖关系的，并且会缓存计算结果。这意味着如果依赖的数据没有发生变化，计算属性不会重复执行。

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

在这个例子中，fullName计算属性会根据firstName和lastName的值动态生成全名。

方法：方法不进行缓存，每次都会重新执行。

<template>
  <div>
    <p>Full Name: {{ getFullName() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  methods: {
    getFullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

在这个例子中，每当你访问getFullName()方法时，都会重新执行这个方法来计算全名。

模板语法

Vue模板语法是基于HTML，并附加了一些特殊的语法来实现数据绑定和指令。以下是一些常见的模板语法：

插值表达式：{{ }}，用于显示数据。
属性绑定：v-bind，用于动态绑定HTML属性。
事件绑定：v-on，用于监听DOM事件。

<template>
  <div>
    <p>{{ message }}</p>
    <button v-on:click="increment">Increment</button>
    <button v-on:click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Count: ' + this.count
    };
  },
  methods: {
    increment() {
      this.count++;
      this.message = 'Count: ' + this.count;
    },
    decrement() {
      this.count--;
      this.message = 'Count: ' + this.count;
    }
  }
};
</script>

在这个例子中，{{ message }}显示了当前的计数，v-on:click绑定到按钮点击事件。

条件渲染与列表渲染

Vue3提供了丰富的指令来实现条件渲染和列表渲染。

条件渲染：使用v-if或v-show实现条件渲染。

<template>
  <div>
    <p v-if="visible">Visible</p>
    <p v-else-if="visible2">Visible2</p>
    <p v-else>Hidden</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
      visible2: false
    };
  }
};
</script>

在这个例子中，根据visible和visible2的值来决定显示哪个内容。

列表渲染：使用v-for实现列表渲染。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

在这个例子中，v-for遍历items数组，并生成一个列表项。:key属性用于为列表项提供唯一的标识符。

组件化开发

创建组件

Vue3支持通过<script>、<style>、<template>标签来定义组件，也可以使用.vue文件来定义组件。

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

<script>
export default {
  data() {
    return {
      title: 'My Component',
      message: 'This is a Vue3 component'
    };
  }
};
</script>

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

组件的属性与事件

组件可以通过props来接收外部传递的数据，通过emits来触发事件。

Props：在父组件中传递数据到子组件。

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>
``

在子组件中定义`props`来接收数据：

```html
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

Emits：在子组件中触发事件，并在父组件中接收。

<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(message) {
      console.log('Received message:', message);
    }
  }
};
</script>

在子组件中定义emits并触发事件：

<template>
  <div>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>

<script>
export default {
  emits: ['my-event'],
  methods: {
    sendEvent() {
      this.$emit('my-event', 'Hello from child');
    }
  }
};
</script>

插槽的使用

插槽可以让你在组件中定义一个可替换的内容区域，使得组件的使用更加灵活。

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

在父组件中使用插槽：

<template>
  <my-component>
    <h1>Custom Header</h1>
    <p>Custom Content</p>
  </my-component>
</template>

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

export default {
  components: {
    MyComponent
  }
};
</script>

组件的注册和使用

组件可以通过全局注册或局部注册的方式在Vue实例中使用。

全局注册：

import MyComponent from './MyComponent.vue';

Vue.component('my-component', MyComponent);

局部注册：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  }
};
</script>

路由与状态管理

Vue Router的基本使用

Vue Router是Vue.js官方推荐的路由管理器，它提供了丰富的功能来管理应用的路由。

安装Vue Router：

npm install vue-router@next

创建路由配置文件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;

在主应用文件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>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

实际项目示例

假设我们创建了一个简单的Vue3应用来展示路由的基本使用，应用将包括一个主页和一个关于页。

首先，创建两个简单的视图文件：

src/views/Home.vue：

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page.</p>
  </div>
</template>

src/views/About.vue：

<template>
  <div>
    <h1>About Page</h1>
    <p>Welcome to the about page.</p>
  </div>
</template>

更新路由配置文件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;

运行项目并访问localhost:8080，你应该能看到主页和关于页。

State Management的基本概念

状态管理是一种集中管理应用状态的方法，它将应用状态集中存储在一个可全局访问的地方，使得状态可以被多个组件共享。

Vue3推荐使用Vuex作为状态管理库，它提供了一套完整的状态管理解决方案。

Vuex的安装与使用

安装Vuex：

npm install vuex@next

创建Vuex Store文件store/index.js：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  getters: {
    count: state => state.count
  }
});

在主应用文件main.js中引入Vuex：

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

在组件中使用Vuex：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement'])
  }
};
</script>

常见问题与调试技巧

常见错误及解决方法

语法错误：确保模板语法正确，例如v-if、v-for等指令的正确使用。
数据绑定问题：确保数据在组件中正确定义，并且引用正确。
异步问题：确保异步操作完成后再进行数据绑定或状态更新。

调试工具的使用

Vue3提供了Vue Devtools，这是一个强大的工具，可以帮助你调试Vue应用。

安装Vue Devtools：

npm install -g @vue/cli@latest

在Chrome浏览器中安装Vue Devtools插件，打开Vue Devtools后，选择你的Vue应用，可以查看组件树、状态管理等信息。

实际项目示例

假设我们创建了一个简单的Vue3应用来展示调试工具的实际使用，应用将包括一个计数器和状态管理。

首先，确保你的项目结构和文件内容如下：

my-vue3-app/
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── logo.png
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
└── store/
    └── index.js

在src/App.vue中，编写一个简单的计数器组件：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    }
  }
};
</script>

在store/index.js中，定义状态和操作：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  getters: {
    count: state => state.count
  }
});

在main.js中，引入并使用Vuex：

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

const app = createApp(App);

app.use(store);

app.mount('#app');

运行项目并打开Vue Devtools，你将能看到组件树和状态管理。

代码优化建议

避免不必要的DOM操作：尽量减少不必要的DOM操作，可以提高应用的性能。
使用key优化列表渲染：在列表渲染时，使用key属性可以提高虚拟DOM的更新效率。
缓存计算属性：计算属性会被缓存，避免在计算属性中执行昂贵的操作。

参考资料

Vue.js官网：https://vuejs.org/
Vue Router文档：https://router.vuejs.org/
Vuex文档：https://vuex.vuejs.org/
Vue Devtools插件：https://github.com/vuejs/vue-devtools