阅读量:0
Vue 3 使用手册
1. 引言
Vue.js 是一个渐进式的 JavaScript 框架，主要用于构建用户界面。与其他单页面应用框架不同，Vue 旨在通过自底向上逐层应用的设计，使您可以逐步将项目迁移至更复杂的架构。Vue 3 是 Vue.js 的最新版本，带来了许多新特性和改进，本文将详细介绍 Vue 3 的使用方法。
2. 安装与设置
2.1 安装 Vue CLI
首先，确保您已安装 Node.js 和 npm。然后，使用以下命令安装 Vue CLI：
npm install -g @vue/cli 2.2 创建项目
使用 Vue CLI 创建一个新的 Vue 3 项目：
vue create my-vue3-project 在提示中选择 Default (Vue 3) 选项或手动选择 Vue 3.x。
2.3 项目结构
创建的项目结构如下：
my-vue3-project/ ├── node_modules/ ├── public/ │ ├── index.html ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ ├── main.js ├── .gitignore ├── babel.config.js ├── package.json ├── README.md ├── vue.config.js 2.4 启动项目
进入项目目录并启动开发服务器：
cd my-vue3-project npm run serve 3. 基本用法
3.1 创建组件
在 src/components 目录下创建一个名为 HelloWorld.vue 的新组件：
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: String } } </script> <style scoped> h1 { font-size: 2em; color: #42b983; } </style> 3.2 使用组件
在 src/App.vue 文件中导入并使用 HelloWorld 组件：
<template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; color: #2c3e50; } </style> 4. 响应式系统
4.1 ref 和 reactive
Vue 3 提供了两个主要的响应式 API：ref 和 reactive。
使用 ref
<template> <div> <p>{{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { ref } from 'vue' export default { setup() { const count = ref(0) const increment = () => { count.value++ } return { count, increment } } } </script> 使用 reactive
<template> <div> <p>{{ state.count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ count: 0 }) const increment = () => { state.count++ } return { state, increment } } } </script> 5. 组件通信
5.1 父子组件通信
通过 props 向子组件传递数据：
<!-- ParentComponent.vue --> <template> <ChildComponent :message="parentMessage"/> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from Parent' } } } </script> <!-- ChildComponent.vue --> <template> <div>{{ message }}</div> </template> <script> export default { props: { message: String } } </script> 5.2 兄弟组件通信
使用事件总线或 Vuex 等状态管理工具来实现兄弟组件之间的通信。
6. 渲染优化
6.1 静态提升
Vue 3 会自动将静态内容提升到渲染函数外部，从而减少渲染函数的执行次数。
6.2 静态节点缓存
Vue 3 会缓存静态节点，从而避免不必要的重新渲染。
7. TypeScript 支持
7.1 项目设置
在创建项目时选择 TypeScript 选项，或手动安装所需依赖：
vue add typescript 7.2 使用 TypeScript
在组件中使用 TypeScript：
<template> <div>{{ message }}</div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ data() { return { message: 'Hello TypeScript' } } }) </script> 8. 模块化与轻量化
Vue 3 更加模块化，通过 Tree shaking 可以减少打包体积。例如，按需引入 Vue Router：
npm install vue-router@next 在 src/main.js 中配置路由：
import { createApp } from 'vue' import App from './App.vue' 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 }) createApp(App).use(router).mount('#app') 9. 资源与学习
9.1 官方文档
9.2 在线课程
9.3 社区与支持
10. 结论
Vue 3 带来了许多新特性和改进，使得开发体验更加顺畅和高效。通过本手册，您可以快速上手 Vue 3 并利用其强大的功能构建现代化的 web 应用。希望这些内容能帮助您更好地理解和使用 Vue 3。
