Javascript
Vue3资料：新手入门及初级教程详解
本文全面介绍了Vue3的基础概念，包括Composition API和更好的TypeScript支持，并详细讲解了Vue3与Vue2的区别及环境搭建方法。文章还深入探讨了Vue3组件开发、响应式原理、路由与状态管理，以及通过一个简单的待办事项应用展示了Vue3的实际应用。文中提供了丰富的代码示例和实战技巧，帮助开发者更好地理解和使用Vue3。
Vue3 是 Vue.js 的最新版本，它在 Vue2 的基础上进行了一系列的改进和优化。Vue3 引入了 Composition API，提供了更灵活的组件逻辑管理和更好的 TypeScript 支持。同时，Vue3 还优化了渲染性能，并引入了新的响应式系统，使得开发效率和应用性能得到显著提升。
Composition API
Composition API 是 Vue3 中引入的一个新的 API，它允许开发者更灵活地组织和复用组件逻辑。通过 setup 函数，开发者可以更清晰地分离和组合组件逻辑。
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
console.log('Component is mounted');
});
return {
count
};
}
};
更好的TypeScript支持
Vue3 对 TypeScript 的支持进行了增强，提供了更强大的类型推断和更丰富的类型定义，使得开发者能够更好地利用 TypeScript 的静态类型检查功能。
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref<number>(0);
onMounted(() => {
console.log('Component is mounted');
});
return {
count
};
}
};
优化的渲染性能
Vue3 对模板解析器进行了重构，使得模板编译速度提高了 20%。同时，通过引入 Proxy 对象作为响应式依赖，Vue3 实现了更高效的依赖收集和更新机制。
Composition API vs Options API
Vue2 使用 Options API，开发者需要在一个对象中定义组件的数据、方法、生命周期钩子等。而在 Vue3 中，Composition API 提供了一种更灵活的方式来组织和复用组件逻辑。
// Vue2 使用 Options API
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
},
mounted() {
console.log('Component is mounted');
}
};
// Vue3 使用 Composition API
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
console.log('Component is mounted');
});
return {
count
};
}
};
语法糖的简化
Vue3 对一些语法糖进行了简化，使得代码更加简洁易读。例如，v-on 简化为 @，v-bind 简化为 :。
<!-- Vue2 --> <template> <button v-on:click="increment">Click me</button> </template> <!-- Vue3 --> <template> <button @click="increment">Click me</button> </template>
要创建一个新的 Vue3 项目，首先需要确保已经安装了 Node.js 和 npm。然后，可以通过 Vue CLI 或者手动创建项目。
使用 Vue CLI 创建 Vue3 项目：
npm install -g @vue/cli vue create my-vue3-project cd my-vue3-project npm install
手动创建 Vue3 项目：
npm init -y npm install vue@next
Vue CLI 提供了快速搭建 Vue3 项目的功能，可以通过 vue create 命令来创建项目，并选择 Vue3 版本。
vue create my-vue3-project
在创建过程中，可以选择预设的配置或者手动选择特性，例如 Babel、Router、Vuex 等。
安装ESLint
使用 Vue CLI 创建项目时，可以选择安装 ESLint 来进行代码格式检查和错误提示。
vue create my-vue3-project --preset @vue/preset-modules --plugins eslint
手动安装 ESLint：
npm install eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev
配置ESLint
在项目根目录下创建 .eslintrc.js 文件，并配置 ESLint 规则。
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'prettier'
],
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12,
sourceType: 'module'
},
plugins: ['vue'],
rules: {
'vue/multi-word-component-names': 'off',
'prettier/prettier': 'error'
}
};
安装Prettier
Prettier 是一个代码格式化工具，可以自动格式化代码，减少代码风格上的不一致。
npm install prettier --save-dev
配置Prettier
在项目根目录下创建 .prettierrc.js 文件，并配置 Prettier 规则。
module.exports = {
semi: true,
singleQuote: true,
trailingComma: 'all',
printWidth: 80,
tabWidth: 2
};
Vue3 中的组件可以通过 export default 导出，然后在其他组件中通过 <component> 标签来使用。
// Button.vue
<template>
<button @click="clickHandler">Click me</button>
</template>
<script setup>
import { ref } from 'vue';
const clickCount = ref(0);
const clickHandler = () => {
clickCount.value++;
};
defineExpose({
clickCount
});
</script>
<!-- App.vue -->
<template>
<HelloWorld />
<Button @click="handleClick" />
</template>
<script setup>
import Button from './components/Button.vue';
const handleClick = () => {
console.log('Button clicked');
};
</script>
通过上述代码，我们定义了一个简单的 Button 组件，并在 App.vue 中使用了它。Button 组件内部定义了一个 clickCount 状态和一个 clickHandler 方法，当按钮被点击时，clickCount 的值会增加。在 App.vue 中，我们通过 @click 事件监听器来处理按钮点击事件。
属性传递
组件可以通过 props 来传递属性，并在组件内部通过 props 来接收这些属性。
// ChildComponent.vue
<template>
<div>{{ name }} is {{ age }} years old</div>
</template>
<script setup>
defineProps({
name: String,
age: Number
});
</script>
<!-- ParentComponent.vue -->
<template>
<ChildComponent name="John" :age="25" />
</template>
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>
在上述代码中，ChildComponent 接收两个属性 name 和 age，并在模板中使用它们。而在 ParentComponent 中，我们通过传递 name 和 age 属性来初始化 ChildComponent。
事件传递
组件可以通过 emit 来触发事件，并在父组件中通过 @ 来监听这些事件。
// ChildComponent.vue
<template>
<button @click="handleClick">Click me</button>
</template>
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['click']);
const handleClick = () => {
emit('click');
};
</script>
<!-- ParentComponent.vue -->
<template>
<ChildComponent @click="handleClick" />
</template>
<script setup>
import ChildComponent from './components/ChildComponent.vue';
const handleClick = () => {
console.log('Child component clicked');
};
</script>
通过上述代码，我们定义了一个触发点击事件的 ChildComponent，并在 ParentComponent 中通过 @click 监听该事件。当点击 ChildComponent 中的按钮时，会触发 ParentComponent 中的 handleClick 方法。
复用组件
复用组件可以通过将通用的逻辑提取到一个独立的组件中，然后在需要的地方引入和使用。
// Button.vue
<template>
<button @click="handleClick">{{ text }}</button>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
text: String
});
const emit = defineEmits(['click']);
const handleClick = () => {
emit('click');
};
</script>
<!-- App.vue -->
<template>
<Button text="Click me" @click="handleClick" />
<Button text="Another button" @click="handleAnotherClick" />
</template>
<script setup>
import Button from './components/Button.vue';
const handleClick = () => {
console.log('Button clicked');
};
const handleAnotherClick = () => {
console.log('Another button clicked');
};
</script>
通过这种方式，我们可以在不同的地方复用 Button 组件，并传递不同的文本和事件处理函数。
优化组件
优化组件可以通过减少冗余代码、提高渲染性能等手段来实现。
// 优化前
<template>
<div v-if="show">{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue';
const show = ref(true);
const message = 'Hello, World!';
</script>
<!-- 优化后 -->
<template>
<div v-show="show">{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue';
const show = ref(true);
const message = 'Hello, World!';
</script>
在优化前的代码中，v-if 会完全移除或渲染节点，而优化后的代码使用 v-show，只是切换节点的显示或隐藏，从而减少了渲染开销。
Vue3 使用 Proxy 对象来实现响应式系统。Proxy 对象可以拦截和转换某些操作，使得当数据发生变化时，Vue3 能够自动更新视图。
import { reactive } from 'vue';
const state = reactive({
message: 'Hello, World!'
});
console.log(state.message); // 输出: 'Hello, World!'
state.message = 'Hello, Vue3';
console.log(state.message); // 输出: 'Hello, Vue3'
通过上述代码，我们定义了一个 state 对象并使用 reactive 函数使其成为响应式的。当 state.message 发生变化时，Vue3 会自动触发视图更新。
Composition API
Composition API 提供了更灵活的方式来组织和复用组件逻辑。通过 setup 函数，开发者可以更清晰地分离和组合组件逻辑。
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
console.log('Component is mounted');
});
return {
count
};
}
};
Options API
Options API 是 Vue2 中使用的 API，开发者需要在一个对象中定义组件的数据、方法、生命周期钩子等。
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
},
mounted() {
console.log('Component is mounted');
}
};
Vue3 中响应式数据的生命周期包括创建、更新和销毁。
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
console.log('Component is mounted');
});
onUnmounted(() => {
console.log('Component is unmounted');
});
return {
count
};
}
};
在上述代码中，我们定义了一个 count 变量，并使用 onMounted 和 onUnmounted 生命周期钩子来处理组件的挂载和卸载。
Vue Router 是 Vue3 中用于实现路由功能的官方库。通过 Vue Router，开发者可以实现单页面应用的导航和路由管理。
安装 Vue Router：
npm install vue-router@next
定义路由配置：
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
在主应用文件中使用 Vue Router：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
定义路由导航：
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</template>
通过上述代码，我们定义了两个路由，并在主应用文件中使用 Vue Router 来管理这些路由。路由导航组件允许用户在不同页面之间切换。
Vuex 是一个用于管理应用状态的库。它提供了一种集中式的状态管理方式，使得状态管理变得更加清晰和易于维护。
安装 Vuex：
npm install vuex@next
定义 Vuex store：
import { createStore } from 'vuex';
export default createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment(context) {
context.commit('increment');
}
},
getters: {
count: state => state.count
}
});
在主应用文件中使用 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：
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const increment = () => {
store.dispatch('increment');
};
return {
increment
};
}
};
通过上述代码，我们定义了一个 Vuex store，并在主应用文件中使用 Vuex。在组件中，我们通过 useStore 获取 store，并调用 increment 方法来更新状态。
通过结合 Vue Router 和 Vuex，可以实现更复杂的应用状态管理。
定义路由配置：
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
在组件中使用路由和 Vuex：
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const increment = () => {
store.dispatch('increment');
};
return {
increment
};
}
};
通过上述代码，我们定义了路由配置，并在组件中使用 Vuex 来管理应用状态。当路由切换时，状态管理可以保持一致性。
创建项目结构
首先，创建一个简单的项目结构，包含 App.vue、TodoList.vue 和 TodoItem.vue 组件。
vue create todo-app cd todo-app
定义TodoItem组件
TodoItem.vue 组件用于展示和编辑待办事项。
<template>
<li>
<input type="checkbox" v-model="completed" />
<span :class="{ completed: completed }">{{ text }}</span>
<button @click="remove">Remove</button>
</li>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
text: String,
completed: Boolean
});
const emit = defineEmits(['remove']);
const remove = () => {
emit('remove');
};
</script>
通过上述代码，我们定义了一个 TodoItem 组件，该组件展示一个待办事项，并提供一个复选框（表示已完成）和一个移除按钮。当用户点击移除按钮时，会触发 remove 事件。
定义TodoList组件
TodoList.vue 组件用于管理待办事项列表。
<template>
<div>
<ul>
<TodoItem
v-for="todo in todos"
:key="todo.id"
:text="todo.text"
:completed="todo.completed"
@remove="removeTodo(todo.id)"
/>
</ul>
<form @submit.prevent="addTodo">
<input v-model="newTodoText" placeholder="Add a new todo" />
<button type="submit">Add</button>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue';
import TodoItem from './TodoItem.vue';
const todos = ref([
{ id: 1, text: 'Learn Vue3', completed: false },
{ id: 2, text: 'Build a todo app', completed: false }
]);
const newTodoText = ref('');
const addTodo = () => {
if (newTodoText.value.trim() !== '') {
const todo = {
id: Date.now(),
text: newTodoText.value,
completed: false
};
todos.value.push(todo);
newTodoText.value = '';
}
};
const removeTodo = (id) => {
todos.value = todos.value.filter((todo) => todo.id !== id);
};
</script>
通过上述代码，我们定义了一个 TodoList 组件，该组件管理待办事项列表，并提供一个表单来添加新的待办事项。当用户点击添加按钮时，会执行 addTodo 方法，添加新的待办事项。当用户点击移除按钮时，会执行 removeTodo 方法，移除待办事项。
定义App组件
App.vue 组件用于展示整个应用。
<template> <TodoList /> </template> <script setup> import TodoList from './components/TodoList.vue'; </script>
通过上述代码，我们定义了一个 App.vue 组件，该组件引入并渲染了 TodoList 组件。
运行项目
npm run serve
项目测试
可以使用 Jest 或 Vue Test Utils 进行单元测试和集成测试。
安装测试工具：
npm install --save-dev jest @vue/test-utils
创建测试文件：
vue add jest
编写测试用例：
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import TodoList from '@/components/TodoList.vue';
describe('TodoList.vue', () => {
it('renders todo items', () => {
const wrapper = shallowMount(TodoList);
expect(wrapper.findAll('li').length).toBe(2);
});
});
通过上述代码，我们定义了一个测试用例，验证了 TodoList 组件是否正确渲染了待办事项。
项目部署与上线
使用 npm run build 命令构建项目，然后将生成的 dist 目录上传到服务器。
npm run build
将生成的 dist 目录上传到服务器，例如使用 FTP 或者 Git。
scp -r dist/* user@server:/path/to/deploy
或者使用 Git：
git add dist git commit -m "deploy" git push
通过上述步骤，你就可以成功地实现一个简单的待办事项应用，并完成项目测试和部署。
-
Vue3教程：新手入门到实践应用12-21
-
VueRouter4教程：从入门到实践12-21
-
Vue3项目实战：从入门到上手12-20
-
Vue3项目实战：新手入门教程12-20
-
VueRouter4项目实战：新手入门教程12-20
-
如何实现JDBC和jsp的关系？-icode9专业技术文章分享12-20
-
Vue项目中实现TagsView标签栏导航的简单教程12-20
-
Vue3入门教程：从零开始搭建你的第一个Vue3项目12-20
-
从零开始学习vueRouter4：基础教程12-20
-
Vuex4课程：新手入门到上手实战全攻略12-20
-
Vue3资料：新手入门及初级教程12-20
-
Vuex4入门指南：轻松掌握Vue状态管理12-20
-
Vue3学习：从入门到实践的简单教程12-20
-
Vue学习：从入门到简单项目实战12-20
-
Vue3教程：初学者快速入门指南12-20
