Vue3学习总结：从零开始的前端探索之旅

弁言

Vue (发音为 /vjuː/，雷同 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模子，资助你高效地开辟用户界面。无论是简单照旧复杂的界面，Vue 都可以胜任。
为什么学习Vue.js？

Vue.js 是一个非常盛行的渐进式 JavaScript 框架，广泛应用于前端开辟。它的紧张上风在于：

• 易学：语法轻便，上手容易。
  
• 机动：可以根据需求渐渐接纳框架的差异部分。
  
• 活泼的社区：拥有丰富的插件和工具生态。
  
• 高效：性能优化精良，恰当构建大规模应用。
  

Vue 3 是 Vue.js 的最新紧张版本，带来了很多新特性和改进，包罗更好的性能、更小的包体积以及更机动的 API 操持。
Vue.js 的发展历程

• 2014年：Vue 1.0 发布，提出了“数据驱动”的概念。
  
• 2016年：Vue 2.0 发布，引入了假造 DOM 和组件体系。Vue 2 已于 2023 年 12 月 31 日制止维护。
  
• 2020年：Vue 3.0 发布，带来了Composition API、相应式体系的改进等。
  

步调指南(vscode为例)

• 安装 Node.js 和 npm
  
  
  
  • 确保已安装 Node.js 和 npm。可以从 Node.js 官网 下载安装。
    
  • 这里各人可以参考热门博主的安装教程Node.js下载安装
    
  • npm安装-具体教程
    
  
  
• 安装 Vue CLI
  
  
  
  • 打开终端，输入下令安装 Vue CLI：
    
  1. npm install -g @vue/cli

  复制代码
  
  
• 打开vscode,利用 Vue CLI 创建新项目：
  
  1. vue create my-vue3-project

  复制代码

• 注意：假如出现这个报错，由于我们安装了Vue CLI后，PowerShell默认的实验计谋制止了运行这个脚本。
  

• 修改我们环境，选择第三个
  

​ 4.安装项目依赖

• 进入项目目次，运行以下下令安装依赖：
  

1. cd my-vue3-project
2. npm run serve

复制代码

• 可以看到，我们的vue项目已乐成，点击当地链接，会在默认欣赏器中打开
  

Vue 3 的焦点概念

相应式数据

Vue 的焦点是相应式数据体系。通过 Vue.reactive 或 ref，我们可以将平凡数据转换为相应式数据，当数据变革时，视图会主动更新。

• 示例代码
  

1. <script setup>
2. import { ref, reactive } from 'vue'
4. const count = ref(0) // 使用 ref 创建一个响应式数据
5. const state = reactive({
6.   name: 'Vue 3',
7.   age: 20
8. }) // 使用 reactive 创建一个响应式对象
10. function increment() {
11.   count.value++ // 修改 ref 数据需要通过 .value
12.   state.age++ // 修改 reactive 数据直接修改属性
13. }
14. </script>
16. <template>
17.   <div>
18.     <p>Count: {{ count }}</p>
19.     <p>Name: {{ state.name }}</p>
20.     <p>Age: {{ state.age }}</p>
21.     <button @click="increment">Increment</button>
22.   </div>
23. </template>

复制代码

组件化开辟

组件化是 Vue 的紧张特性。它允许我们将复杂的 UI 拆分成多个可复用的组件。

1. <template>
2.   <div class="my-component">
3.     <h2>{{ title }}</h2>
4.     <p>{{ content }}</p>
5.   </div>
6. </template>
8. <script setup>
9. defineProps({
10.   title: {
11.     type: String,
12.     required: true
13.   },
14.   content: {
15.     type: String,
16.     default: 'Default content'
17.   }
18. })
19. </script>
21. <style scoped>
22. .my-component {
23.   padding: 20px;
24.   border: 1px solid #ddd;
25.   margin: 10px;
26. }
27. </style>

复制代码

利用组件：(App.vue)

1. <template>
2.   <MyComponent title="Hello Vue 3" content="This is a Vue 3 component!" />
3. </template>

复制代码

如图所示：

• ctrl+s生存，打开我们刚才运行的网页，来看效果
  

生命周期钩子

Vue 组件有一个生命周期，从创建、挂载、更新到烧毁。我们可以在这些阶段实验特定的逻辑。

1. <script setup>
2. // 生命周期函数
3. import { onMounted, onUpdated, onUnmounted } from 'vue'
5. onMounted(() => {
6.   console.log('组件挂载完成')
7. })
9. onUpdated(() => {
10.   console.log('组件更新完成')
11. })
13. onUnmounted(() => {
14.   console.log('组件销毁')
15. })
16. </script>

复制代码

模板语法

Vue 的模板语法非常轻便，支持条件渲染、循环渲染等。
条件渲染：

1. <template>
2.   <div>
3.     <p v-if="isShow">这是一个条件渲染的内容</p>
4.     <p v-else>默认显示的内容</p>
5.   </div>
6. </template>

复制代码

循环渲染：

1. <template>
2.   <ul>
3.     <li v-for="item in items" :key="item.id">{{ item.name }}</li>
4.   </ul>
5. </template>

复制代码

组合式API

组合式 API 是 Vue 3 保举的编程方式，它将组件的逻辑拆分成多个可复用的函数。

1. <script setup>import { ref, onMounted } from 'vue'const items = ref([])function fetchItems() {  // 模仿 API 哀求  fetch('https://api.example.com/items')    .then(response => response.json())    .then(data => {      items.value = data    })}onMounted(() => {  fetchItems()})</script><template>
2.   <ul>
3.     <li v-for="item in items" :key="item.id">{{ item.name }}</li>
4.   </ul>
5. </template>

复制代码

相应式数据与组件化开辟

数据挟制与相应式原理

Vue 3 利用 Proxy 来实现相应式数据。Proxy 可以拦截对对象的读取和修改利用，并在修改时触发视图更新。
创建和利用组件

组件可以是功能模块化开辟的焦点。在 Vue 3 中，组件之间可以通过 props 转达数据，通过变乱举行通讯。
父子组件通讯：

1. <!-- 父组件 -->
2. <template>
3.   <ChildComponent :message="parentMessage" @child-event="handleChildEvent" />
4. </template>
6. <script setup>
7. const parentMessage = 'Hello from parent!'
8. const handleChildEvent = (data) => {
9.   console.log('Received from child:', data)
10. }
11. </script>

复制代码

1. <!-- 子组件 -->
2. <template>
3.   <button @click="emitEvent">Send Message to Parent</button>
4. </template>
6. <script setup>
7. const emit = defineEmits(['child-event'])
9. function emitEvent() {
10.   emit('child-event', { message: 'Hello from child!' })
11. }
12. </script>

复制代码

组件之间的通讯

除了 props 和 $emit，我们还可以利用 Vuex 或 Pinia 举行状态管理。
Vue 3 的高级特性

路由的利用（Vue Router）

Vue Router 是 Vue 官方的路由库，支持SPA（单页应用）。
1. 安装 Vue Router

起首，你必要安装 Vue Router。你可以利用 npm来安装：

1. npm install vue-router@4

复制代码

2. 创建路由设置文件

在 src 目次下创建一个 router 文件夹，并在此中创建一个 index.js 文件。这个文件将包罗你的路由设置。

1. import { createRouter, createWebHistory } from 'vue-router'
2. import Home from '../views/Home.vue'
3. import About from '../views/About.vue'
5. const routes = [
6.   {
7.     path: '/',
8.     name: 'Home',
9.     component: Home
10.   },
11.   {
12.     path: '/about',
13.     name: 'About',
14.     component: About
15.   }
16. ]
18. const router = createRouter({
19.   history: createWebHistory(process.env.BASE_URL),
20.   routes
21. })
23. export default router

复制代码

3. 创建视图组件

在 src 目次下创建一个 views 文件夹，并在此中创建 Home.vue 和 About.vue 文件。
src/views/Home.vue

1. <template>
2.   <div class="home">
3.     <h1>首页</h1>
4.     <p>欢迎来到首页！</p>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   name: 'Home'
11. }
12. </script>

复制代码

src/views/About.vue

1. <template>
2.   <div class="about">
3.     <h1>关于</h1>
4.     <p>这是关于页面。</p>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   name: 'About'
11. }
12. </script>

复制代码

4. 在主文件中利用路由

在 src/main.js 文件中引入并利用路由。
src/main.js

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. import router from './router'
5. const app = createApp(App)
7. app.use(router)
9. app.mount('#app')

复制代码

5. 在 App.vue 中添加导航链接

在 App.vue 文件中添加导航链接，以便用户可以在差异的路由之间切换。
src/App.vue

1. <template>
2.   <div id="app">
3.     <nav>
4.       <router-link to="/">首页</router-link> |
5.       <router-link to="/about">关于</router-link>
6.     </nav>
7.     <router-view />
8.   </div>
9. </template>
11. <script>
12. export default {
13.   name: 'App'
14. }
15. </script>
17. <style>
18. #app {
19.   font-family: Avenir, Helvetica, Arial, sans-serif;
20.   -webkit-font-smoothing: antialiased;
21.   -moz-osx-font-smoothing: grayscale;
22.   text-align: center;
23.   color: #2c3e50;
24.   margin-top: 60px;
25. }
27. nav {
28.   padding: 30px;
29. }
31. nav a {
32.   font-weight: bold;
33.   color: #2c3e50;
34.   text-decoration: none;
35.   margin: 0 10px;
36. }
38. nav a.router-link-exact-active {
39.   color: #42b983;
40. }
41. </style>

复制代码

实际项目开辟中的应用

项目布局的搭建

一个范例的 Vue 3 项目布局：

1. src/
2. ├── assets/          # 静态资源
3. ├── components/      # 组件
4. ├── store/           # Vuex 或 Pinia 状态管理
5. ├── router/          # 路由配置
6. ├── App.vue          # 根组件
7. └── main.js          # 入口文件

复制代码

进阶学习与实践

学习Vue源码

阅读 Vue 源码可以从 reactivity 和 runtime 入手，明白相应式体系和假造 DOM 的实现。
到场开源项目

到场 Vue 或干系生态的开源项目，提升实战本事。
关注前端技能动态

保持对前端技能的关注，如 TypeScript、Web Components 等。
碰到的标题及办理方法

常见标题汇总

• 相应式数据不更新：确保利用 ref 或 reactive 创建数据
  
• 组件通讯标题：利用 props、变乱或状态管理
  
• 路由跳转标题：查抄路由设置和导航保卫
  

调试本事与履历分享

• 利用 console.log 或 debugger 跟踪变量
  
• 利用 Vue DevTools 查抄组件状态
  
• 阅读官方文档和社区办理方案
  

学习资源保举

官方文档

• Vue 3 官方文档
  
• Vue Router 文档
  
• Vuex 文档
  

在线课程与教程

• Vue 3 入门到实战
  
• Vue 3 官方教程
  

社区与论坛

• Vue 官方论坛
  
• 掘金 Vue 专题
  

学习总结

通过学习 Vue 3，我们把握了相应式数据、组件化开辟、路由和状态管理等焦点概念，并在实际项目中得到了应用。