【2024新版】3小时学会Vue3 零基础入门到实战开发 AI智能编程开发移动端小程序端web前端都有讲 vite+pinia+axios+elementplus

今天开始带着大家一起零基础学习vue3，我们通常学习完vue3的目的就是为了开发移动项目，小程序项目或者web网页项目。
所以我们会一边学习基础，一边进行实战。而我们学习vue3来开发项目的一个延申就是uniapp。在下面的课程中我们就简称uniapp为uni吧。我这里从零基础开始教大家学习vue3语法，后面可以带大家简单的做几个实战项目。所以不用担心自己没有基础，跟着石头哥认真学习就行了的。
并且我们开发过程中也会借助Ai人工智能来帮助我们学习，有Ai相伴，你就可以零基础快速的学会Vue3并应用到实战。

一，认识vue3

1-0，学习vue3可以做什么

学习Vue 3可以为你打开多种开发可能性，以下是一些主要的应用领域：

单网页应用（SPA）：

Vue 3非常适合开发单页应用，这种应用在用户与页面交互时不需要重新加载整个页面，从而提供更流畅的用户体验。

移动应用：

结合框架如Uniapp，Vue 3可以用来开发原生移动应用。
使用Vue 3结合UniApp框架可以实现跨平台开发，可以开发出同时适用于Web、小程序，iOS和Android平台的应用。甚至也可以开发出鸿蒙app。

小程序开发：
借助uniapp可以开发微信，抖音，支付宝小程序等。。。
企业级应用：Vue 3的响应式和模块化特性使其非常适合开发复杂的企业级应用。
动态数据可视化：
Vue 3可以结合D3.js等库，用于创建动态的数据可视化和图表。
内容管理系统（CMS）：
Vue 3可以用来开发CMS，例如博客平台、新闻网站等。
电子商务平台：
利用Vue 3，可以开发功能丰富的电子商务网站和应用。
教育和在线学习平台：
Vue 3可以用来构建在线课程、教育工具和学习管理系统。
社交网络和论坛：
Vue 3可以用于开发社交网络平台和论坛，提供实时的交互体验。
游戏开发：
虽然不是主要的游戏开发技术，但Vue 3可以用于开发轻量级的Web游戏。

扫描二维码关注公众号，回复： 17408512 查看本文章
API客户端：
Vue 3可以作为API的前端客户端，与后端服务进行数据交互。
桌面应用程序：
通过Electron等框架，Vue 3可以用来构建跨平台的桌面应用程序。

学习Vue 3不仅可以让你掌握一个流行的前端框架，还可以让你具备构建各种类型Web应用的能力。甚至可以开发移动端和小程序端的应用。随着技术的不断进步，Vue 3的应用范围还在不断扩大。

所以我们接下来学习vue3重点就是开发移动端和网站端。而移动端又可以借助uniapp实现web，安卓，ios，鸿蒙，小程序全平台开发。

1-1，vue3的优势

今天带大家来学习vue3，熟悉石头哥的同学肯定知道，我们要学习就学习最新的。当然如果你们公司或者你想学习vue2可以去看下别人的视频，学完vue2再来学习石头哥的vue3也行，不过我还是建议要学就学最新的，我们直接从最新的vue3来开始学习。

至于我们为什么不学习vue2，主要是基于以下优势

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序。Vue 3 是该框架的最新主要版本，它带来了许多改进和新特性。vue3运行速度是vue2的二倍打包比vue2小41%，初次渲染快55%，更新渲染快133%，内存减少54%。
以下是一些开发者可能选择使用 Vue 3 而不是 Vue 2 的原因：

性能提升：Vue 3 在虚拟 DOM 的重写、组件初始化、编译器优化等方面进行了性能优化，使得 Vue 3 在运行时性能上有了显著提升。
更小的打包体积：Vue 3 的代码更加精简，减少了最终打包的体积，这有助于加快页面加载速度。比vue2打包大小可以减少41%
响应式系统的改进：Vue 3 引入了一个新的响应式系统，它提供了更精确的依赖跟踪和更新机制，减少了不必要的渲染。
Composition API：Vue 3 引入了 Composition API，这是一种新的编写组件逻辑的方式，它允许开发者以更灵活和可组合的方式组织代码。
TypeScript 支持：Vue 3 的开发过程中大量使用了 TypeScript，这使得框架对 TypeScript 提供了更好的支持，有助于开发者编写更健壮的代码。
Teleport：Vue 3 引入了一个新的内置组件 Teleport，它允许开发者将组件的子节点传送到 DOM 中的其他位置。
Fragment：Vue 3 支持多个根节点，这意味着可以在模板中使用多个元素作为组件的根。
自定义渲染器：Vue 3 允许开发者创建自定义渲染器，这为框架的定制化提供了更多可能性。
全局 API 的更改：Vue 3 重写了全局 API，使其更加一致和易于理解。
工具和生态系统的更新：随着 Vue 3 的发布，相关的工具和生态系统（如 Vue CLI、Vue Router、Vuex 等）也进行了更新，以支持新特性。

1-2，uniapp和vue的关系

uni-app 和 Vue之间有着紧密的联系，它们之间的关系可以从以下几个方面来理解：

技术基础:
- uni-app 是基于 Vue.js 框架开发的。这意味着 uni-app 继承了 Vue 的核心特性，如响应式数据绑定、组件系统、指令系统等。
语法和API:
- 在 uni-app 中，开发者可以使用 Vue 的语法来定义数据、模板、方法等。uni-app 支持 Vue 的模板语法、计算属性、侦听器、生命周期钩子等。
组件化开发:
- uni-app 遵循 Vue 的组件化开发模式，允许开发者通过创建可复用的组件来构建复杂的用户界面。
跨平台:
- uni-app 的一个主要特点是跨平台能力，它允许开发者使用 Vue 的开发方式编写代码，然后将应用发布到不同的平台，包括 Web、iOS、Android 以及各种小程序平台。
开发工具:
- uni-app 有自己的开发工具，如 HBuilderX，它提供了对 Vue 项目的支持，包括代码编辑、调试、打包等功能。
生态和社区:
- Vue 拥有一个庞大的生态系统和社区，提供了大量的插件、工具和资源。uni-app 作为基于 Vue 的框架，可以利用这个生态系统中的许多资源。
Vue 版本支持:
- uni-app 支持不同版本的 Vue.js。从 uni-app 2.9.3 版本开始，它正式支持 Vue 3，允许开发者使用 Vue 3 的新特性和性能改进。
性能优化:
- Vue.js 以其轻量级和高性能而闻名。uni-app 在保持 Vue 性能优势的同时，还针对跨平台应用进行了额外的性能优化。
学习曲线:
- 对于熟悉 Vue 的开发者来说，学习 uni-app 会相对容易，因为他们可以利用已有的 Vue 知识来开发跨平台应用。

总结来说，uni-app 是在 Vue.js 的基础上构建的，专门为跨平台开发设计的框架。它保留了 Vue 的核心特性，同时增加了跨平台开发的能力，使得开发者能够使用一套代码来构建多个平台上运行的应用程序。

查看下图，可以看到uniapp项目和vue3项目基本上类似，都有App.vue.开发页面也都是用的vue文件。

并且页面的技术点都是一模一样的

所以如果你会vue就可以直接上手开发uniapp，当然如果你不会uniapp也不会vue，今天就跟着石头哥从零开始学习vue3和uniapp。

1-3，uniapp和vue，小程序的关系

UniApp 和 Vue 与小程序之间的关系可以从以下几个方面理解：

Vue 为基础：Vue 是一个流行的前端框架，专注于用户界面的构建。它通过组件化的方式，使得开发者可以高效地组织和重用代码。Vue 本身主要面向 Web 开发，但它的灵活性也为扩展到其他平台提供了可能。
UniApp 的跨平台能力：UniApp 是基于 Vue 的一个跨平台开发框架，它不仅支持 Web 端（H5）的开发，还特别针对小程序平台进行了优化。这意味着使用 UniApp 编写的代码，经过编译后，可以直接运行在微信小程序、支付宝小程序、百度小程序等多个小程序平台上，无需为每个平台单独编写代码，大大提高了开发效率和代码复用率。
小程序特性的集成：在 UniApp 中，为了更好地适应小程序的开发需求，框架集成了小程序的特定标签和API。尽管 UniApp 代码基于 Vue 语法，但在实际开发小程序时，开发者可以使用类似于小程序原生的开发方式，比如使用小程序的组件和API来访问设备的特定功能，如本地存储、支付接口等。
编译目标：当选择编译目标为小程序时，UniApp 会将 Vue 代码转换为符合各大小程序平台规范的代码，确保应用可以在各个小程序环境中正常运行。这个过程中，框架会处理好 Vue 的响应式数据绑定、组件生命周期等特性与小程序平台之间的映射问题。

总结而言，Vue 为 UniApp 提供了强大的基础架构和开发体验，而 UniApp 则在此基础上扩展了对小程序等多平台的支持，使得开发者能够利用 Vue 的便利性，快速开发出适应多个小程序平台的应用。

uniapp是基于vue框架，所以如果你会vue的话，来学uniapp会很简单。uniapp的开发规范和小程序相似，所以如果你跟着石头哥学过小程序，再来学uniapp就能很快的入门。

当然了，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习这门uniapp入门课即可。

所以我们学习完这门课，vue3，uniapp，小程序我们都可以熟练的开发了。

1-4，uniapp的好处

我们学习vue3就先从uniapp开发。学习之前先要认识uniapp的好处，你就知道我们为啥要先从uniapp来入门vue3了

看下官网 https://uniapp.dcloud.net.cn
就可以看到，我们用编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

总结起来uniapp有以下几点好处

1，同一套代码可以编译运行多端（小程序，安卓，ios，web等）
2，节省人力和维护成本
3，接近原生，体验效果更好
4，开发效率高，开发时间更短
5，学习成本比较低（3-15天即可入门）
6，社区活跃，版本迭代快，有问题更容易在社区解决

1-5，为什么要选择uni-app

我们这一节主要是来了解下uniapp。因为uniapp是使用vue语法开发的，所以我们在学习vue3的同时，也会教大家进行实战开发uniapp项目。uniapp开发也是我们vue3重点应用方向。

在vue的官方文档里，我们看到创建vue3项目需要用到npm，对于纯新手小白来说。是不太友好的，因为好多人配置node环境就很费劲。所以我们今天结合uniapp来零基础便捷的学习vue3知识。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势

1-6，功能框架图和多平台运行

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。其实说白了，就是开发一套uniapp代码，就可以在当前主流的平台上运行。大大的节省了开发成本。

大家看下上图，其实就可以知道，如果没有uniapp，我们想在app，h5，小程序里运行我们的项目，那么我们至少要开发4套不同平台的代码，uni真正的好处就是我们只需要开发一套代码就可以在主流的平台上全平台运行。

下图可以看到我们一套代码可以在多个平台运行的效果。而现在uniapp也已经支持了鸿蒙app的开发。

1-7，选项式API和组合式api

在正式学习vue3之前先给大家普及一个简单的知识。

Vue.js 提供了两种主要的组件开发风格：选项式（Options API）和组合式（Composition API）。这两种风格各有特点，适用于不同的场景和开发偏好。

1-7-1，选项式API（Options API）

简介：这是Vue 2中就已经存在的经典开发模式，也是大多数Vue开发者熟悉的编程方式。选项式API通过一系列预定义的选项（如data, methods, computed, watch等）来组织组件的逻辑。
特点：
- 直观易懂：对于初学者友好，每个选项对应组件的一个方面，逻辑结构清晰。
- 模块化：组件的不同部分（状态、计算属性、方法等）被分隔在不同的选项下，便于理解和维护。
- 灵活性：因为每个选项是独立的，所以修改或添加逻辑比较直接。
不足：随着组件复杂度增加，大型组件中的状态和逻辑可能变得分散，难以管理和复用。

1-7-2，组合式API（Composition API）

简介：Vue 3引入的新API，旨在解决复杂组件的可维护性和可复用性问题。组合式API的核心思想是使用setup()函数集中管理组件的状态和行为，鼓励使用函数式和响应式编程的思想。
特点：
- 逻辑复用：通过组合函数轻松复用状态逻辑和行为逻辑，提高代码的可维护性和可测试性。
- 集中管理状态：使用ref和reactive等API，可以在setup()中集中初始化和管理组件的状态。
- 清晰的数据流：利用Composition Functions，可以更清晰地表达组件内部的数据依赖关系，使代码逻辑更加直观。
- 更适合大型项目：对于复杂应用，组合式API能够帮助开发者更好地组织和管理组件的内部逻辑。
学习曲线：对于习惯选项式API的开发者，可能需要时间去适应组合式API的思维方式和编码方式。

1-8，为什么先学选项式API

选项式API和组合式API并不是互斥的，Vue 3中两者可以共存，并且Vue 3也提供了@vue/composition-api库让Vue 2应用能够使用组合式API。选择哪种API取决于项目的具体需求、团队的技术栈偏好以及个人的编程风格。对于追求组件逻辑复用性和管理复杂状态的项目，组合式API通常更为推荐；而对于小型项目或者初学者，选项式API因其直观简单，可能是更好的起点。

为了降低大家的学习成本，我先用基础简单的选项式Api来带大家入门。等大家学习的差不多了。我再给大家讲组合式api。

1-9，学习安排和AI智能编程

移动端开发学习
我们先通过HBuilderX来学习vue3的基础语法。之所以一开始先用uniapp来讲解vue3的语法。就是为
网站端开发学习
然后借助HBuilderX来进行vue3网站的实战学习。

这门课我们也会学会两种开发者工具的使用。
这两款都可以用来开发vue3项目，我们两款开发者工具都会教大家，大家后面学会后根据自己的个人喜好或者公司要求来使用即可。

HBuilderX：偏向uniapp实现手机移动端，小程序端
Visual Studio Code：偏向网站，管理后台

我们先带大家手把手的一行行敲代码。然后再接入AI编程，这样大家在记住基础语法的基础上，再使用AI智能辅助编程。就会大大提升开发效率。

二，开发者工具

所谓工欲善其事，必先利其器。我们开发uniapp学习vue3语法肯定要有一个得心应手的开发者工具。

我们开发uniapp移动端的工具就是HBuilderX

2-1，下载HBuilderX开发者工具

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下面是hbuilder官方的简介。可以看出来专为Vue打造

我们可以直接去官网下载HBuilderX开发者工具官网下载地址
进去后我们只需要点击下载即可，记得window和mac电脑要下载自己对应的版本。

2-2，安装HBuilderX

其实HBuilderX的安装很简单，我们上面下载好的安装包，解压好就可以了，解压好以后如下图。当然我这里是window电脑的安装过程，大家如果是mac电脑，可以自行安装。安装过程基本上大差小不差的。

我们在解压好的文件里双击exe文件即可运行。

打开后如下

当然了，如果感觉每次从目录里双击exe文件打开麻烦，可以固定到任务栏或者创建快捷方式，然后把快捷方式放到桌面。

也可以直接发送到桌面快捷方式

一般情况下，我们第一次打开项目关闭的时候，系统会提示我们自动创建一个桌面快捷方式的。

当然我比较喜欢固定到任务栏，因为以后要经常用整个开发者工具，所以怎么样打开方便就怎么来就行了。

三，创建属于自己的第一个vue3项目

当然如果你有学过石头哥的小程序课程，再来学习uni就可以很快的入门的。反过来说，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习即可。

3-1,创建一个新的uniapp项目

为什么要创建uniapp项目呢，因为我们作为新手来说，直接搭建一个vue3项目需要下载node，使用命令行。这样显得门槛太高，太麻烦。所以我们借助uniapp项目来学习vue3语法。大大的降低了门槛。因为uniapp把开发vue3的所有环境对给我们准备好了。我们直接创建uniapp项目，直接就可以上手学习vue3了。

在点击工具栏里的文件 -> 新建 -> 项目

然后在弹出的创建页面做以下配置

1，项目名称：随便取，可以用汉字，但是尽量用英文或者拼音
2，项目路径：一般保持默认即可，不过我个人比较喜欢放在桌面，这样后面找代码方便些。
3，选择模板：学习期间用默认空白模板即可，后面我们学的差不多了，就可以使用官方提供的模板，进行快速开发了。
4，vue版本：因为我们的uniapp是基于vue开发的，所以这里要选择vue版本，既然我们学习，就建议大家学习最新的，用vue 3这个版本就可以了。并且我们今天要学习vue3，所以这里一定要选中vue3版本。
5，学习期间，我们不使用uniCloud和gitCode代码托管平台，所以这两个选项不用勾选即可。所有这些设置完，就可以点击创建了。

关于项目路径，比如我在桌面新建一个demo1空白文件夹，然后在创建项目时点击浏览，选择自己创建的demo1文件夹即可。

这样我们创建的项目就会在demo1文件里，也就是我们的项目源码就存在了demo1里

新创建好的项目如下

可以看到我们的新项目就创建在了demo1里，到这里我们的第一个uniapp项目就创建好了。
跟着石头哥学过微信小程序开发的同学大概可以看出来，uniapp项目其实和小程序项目很相似的。我们通过uniapp把vue3学完，就可以同时做移动端和小程序端了。

一些组件，语法也很相似，因为uniapp就是基于vue框架的，而小程序呢也是借鉴了vue。所以你学过石头哥的小程序课程，再来学uni，肯定学的很快的。当然了，即便没学过小程序，石头哥也会手把手的带着大家零基础入门uni的，只要跟着石头哥认真学习。

3-2，认识uniapp项目目录结构

我们上面一步创建好了项目，这一节我们就来认识项目。
一个完整的uni项目的目录结构如下，我们后期学习uniapp项目实战的时候会逐个带大家学习，所以目前阶段，大家只需要大致知道就行，没有必要死记硬背下来。

大家可以先对照着官方给出的目录结构，大致的知道我们创建的第一个项目里每个文件都是什么作用。我在配套视频讲解里，会慢慢的带着大家熟悉的。

我这里先用通俗的话给大家说下我们新建项目的目录结构，方便大家理解

pages：所有页面存放的目录，我们目前只有一个index页面，后面再创建别的页面，比如个人中心，列表页，详情页等，都是放在这个pages文件里
static：静态资源目录，例如图标，图片，音视频等
App.vue：我们的根组件，用来配置App全局样式以及监听，所有页面的切换都是在这里进行的。
index.html：就是我们的uniapp使用的vue框架生成的单页面文件，有点类似我们的网页的index页。
main.js：项目初始化入口文件，主要用来初始化一些需要的东西
manifest.json ：用来指定应用名称、appid、logo、版本等打包信息，后面我们配置微信小程序，支付宝小程序等，可以在这里配置
pages.json ：配置页面路由、导航条、选项卡等页面类信息，决定页面文件的路径，窗口样式，导航栏，底部的tabbar等。
uni.scss ：这里是uni-app内置的常用样式变量，方便控制应用的整体风格，比如颜色，边框等

uniapp官方文档也有大致的介绍的

3-3，认识开发者工具

我们可以在顶部的工具栏里做一些开发者的配置，比如我这里把主题设置为了酷黑色。

当然了这里大家根据自己的喜好，去做一些简单的设置即可。我们后面的学习中会慢慢的用到工具栏里的东西，在视频里我慢慢的给大家做介绍。

我们常用的开发者工具的功能还有模拟器，调试器，在下一节的。

3-4，项目的运行和预览

我们项目的预览常用的有下面几个方式。为了降低大家的学习成本，我们学习阶段主要运行到内置浏览器，后面会慢慢教大家运行到小程序或者手机上。

运行到浏览器就是运行到我们电脑上的浏览器

运行到手机或者模拟器：就是可以运行到我们的安卓或者苹果手机上

运行到小程序：就是我们开发的项目可以运行到微信，支付宝，百度小程序等。

运行到内置浏览器：这是我们目前学习阶段最常用的方式，所以我们目前运行先使用内置浏览器即可。

3-5，运行项目到内置浏览器

我们点击运行到内置浏览器，第一次会提示：安装插件，我们点击确定，安装即可。然后耐心等待插件的安装即可。

安装成功

然后再次点击运行到内置浏览器，就可以在内置浏览器上预览我们的项目了

这时候我们也多了一个调试器，调试器主要就是用来打印一些日志信息，来帮助我们调试项目，辅助修复bug。

四，vue3开发三剑客

4-1，页面布局，样式，js逻辑

如果大家学过石头哥的小程序入门课，肯定知道石头哥的小程序开发三剑客。其实uni开发也有自己的三剑客。同样正常一个vue3项目的开发三剑客和uniapp是一样的。因为uniapp就是vue3的一个重点应用方向。

可以看下vue3的页面三剑客。。。

下面是uniapp的

vue3开发三剑客

template页面布局：
主要用来布局组件的(相当于大楼结构)uni的布局
如:楼有几层，每层有多少房间，有什么设备
style页面样式
主要决定显示样式(决定大楼的样式)uni的样式
如:颜色，大小，宽高等
script页面逻辑
主要用来处理逻辑(决定大楼具备哪些功能)uni的js逻辑
如:大楼具有电梯功能，空调制冷，灯光，供水，供电，主要是为了大厦的运行。

下面画个图，来说明三者的关系。

template:如大厦有3层楼，一楼商场，二楼家层，顶餐饮娱乐
style:如大厦外层是粉红色，室内装饰颜色等
script:让大厦运行起来，如电梯乘坐功能，三楼餐厅有吃饭功能，电影院放电影的功能

4-2，uniapp/vue3和小程序，传统web对比

结构	小程序	传统web	uniapp/vue3
结构布局	Wxml	Html	写在template里
样式	Wxss	Css	写在style里
逻辑	JavaScript	JavaScript	写在script里
配置	Json	无	Json

五，注释和日志打印的学习

5-1，注释的学习

我们在学习后面课程之前，先来学习下注释。注释是在代码里给予提示使用的，主要是让别人更快的熟悉你的代码，也方便后期自己看自己的代码，快速回忆起来使用的。注释有快捷键的，正好我们上面一节有讲常用的快捷键。

window电脑：Ctrl+/
mac电脑：command+/

可以看到我们常用的三种注释如下，正好和我们前面学的三剑客对应起来。

布局的注释是：
逻辑代码的注释是： //
样式的注释是：/* */

我们这里没有必要记每种注释的写法，只需要记住快捷键，可以快速生成注释即可。这就是快捷键的好处。

5-2，日志打印的学习

我们在开发过程中，总会遇到各种各样的问题，学会在控制台看日志，对我们来说可以帮助我们快速的定位问题，解决问题。
我们开发过程中也会经常用到日志打印。日志打印呢，就是事先打印出来一些东西，用以验证我们的代码输出的结果是否正确。

1，内置浏览器打印日志

日志打印的语法如下

console.log("我的打印出来的日志内容")

可以看出我们在控制台日志里打印出来了我们写的日志，并且后面也告知我们这行代码写在了第16行。这样在日后的开发过程中，都可以快速的方便我们校验代码，定位问题，解决问题。

有的同学控制台可能打印不了日志，那我们就在内置浏览器里打印日志

2，外部浏览器里打印日志

有的同学在上面内置浏览器里无法打印日志，所以这里提供一个备用方案，我们在前面运行项目章节有教大家怎么样运行到电脑浏览器。我们只需要运行项目到自己电脑浏览器即可。

如我这里以运行到chrome浏览器(谷歌浏览器)为例

项目运行到浏览器后，右键然后点击检查。就可以看到控制台了。

我们点击Console就和内置浏览器一样，可以打印日志了。

5-3，日志报错信息

我们的代码的编写好，就可以点击运行，有时候运行会在控制台的日志报错，一般的报错如下图，基本上都是深颜色的爆红，所以一般情况下，控制台日志里出现爆红，就说明我们的代码有错误，这时候就要根据报错日志，去定位自己的代码错误了。
我们在后面的实战课程中，会故意写一些错误代码，然后教大家如何识别错误，更改代码。

六，常见组件的学习

我们学习vue3的时候难免会遇到一些常用的布局组件，我们这里以uniapp的组件为例，uni为开发者提供了一系列的基础组件，这些组件类似于html里的基础标签元素。我们后面学习vue3开发后端网站的时候会使用html的标签，后面会再给大家讲的。现在学习uniapp移动端，就先给大家介绍一些uniapp常用的组件。

6-1，认识view组件

view组件：相当于一个盒子，可以用来装一些别的组件。
它类似于传统html中的div，用于包裹各种元素内容。后面学习vue3开发后端的时候可以再用div

如果大家有html的web基础，就可以把我们这里的view理解为html里的div标签。如果你没学过也无所谓，直接跟着我学习view即可。

在代码里简单的使用：

6-2，认识text组件

text组件：主要用来显示文字的。类似与html里的span标签。

6-3，认识input组件

input组件主要用来获取用户输入的信息的，一般在用户填写信息，提交数据，登录注册和提交表单时会用到。和html里的input一样的。

输入框input有很多属性，我这里把一些常用的属性带着大家学习下。

比如我们给input的type设置为number属性值，那么我们在输入内容的时候，只可以输入数字。

6-4，认识button组件

button 组件：是按钮组件，和html里的button是一样的，我们后面会经常用到。
button按钮有很多属性，我们后面主要是点击事件的时候使用

七，数据绑定和函数/方法（Methods）

7-1，数据绑定

7-1-2，组件外的数据绑定(文本插值)

我们在页面布局里写数据，一般情况下可以直接写，比如下面我们可以用10个text里显示10个编程小石头，假设我们有一个这样的需求，需要把编程小石头给为石头哥。如果我们每个都改一遍，是不是要改10遍，这样就导致效率低下了。

所以我们这里可以用数据动态绑定来提升效率。

数据绑定最常见的形式就是使用 { {…}}（双大括号）的文本插值，就是用{ {}}包裹你的值，然后这个值就可以动态的显示了，比如我用 { {name}} 然后给这个name设置值为：编程小石头，如下，可以看到我们和上面写10遍编程小石头是一样的。

我们想把编程小石头改为石头哥，就只需要改name的值就行了。如下所示。在这里插入图片描述

这样我们就明白用数据绑定的好处，其实我们后面的开发中，除了那种死的不会变的数据可以直接写死外，其他的后面可能需要改变的数据最好都用数据动态绑定。

关于数据绑定的语法需要大家记住，一定要多练，因为后面会经常用的。
就是在页面布局需要显示数据的地方用 { {数据名}}
然后在js的data里设置数据值，如下：

这里其实使用了vue3的数据绑定，而vue3官方又叫这种数据绑定为文本插值。其实就是把数据动态的绑定到我们组件外。

小案例：
这里再给大家用一个小案例了解数据绑定的好处，比如页面上有个数字，每点击一次按钮，对数字进行加一。

可以看出我们这里同样是使用了数据绑定，再点击按钮的时候对数据进行加一操作，而加一后的数据，会动态的更新到页面上。

7-1-2，组件内的数据绑定(v-bind属性绑定)

我们上面一节学习的文本插值式的数据绑定，那是把我们的数据动态的绑定到组件外。
如果我们想动态的绑定组件内的属性数据呢。比如我们前面学习的class类选择器对组件设置样式。

这里的class和style都是组件内的属性。可以看到我们的属性值都是写死的，现在有个需求，我们第三层楼，想在点击按钮的时候变成粉色。该怎么实现呢。这时候就不能把第三层的class属性值写死为floor3，要通过属性绑定来动态更新。

可以看出我们一开始定义了一个动态变量color3，一开始使用floor3，点击按钮后把color3动态换成了pink。

小案例
比如我们的image图片组件的src属性，我们的图片链接不想写死，想动态的去替换。这个时候就可以用v-bind 动态地绑定属性了

v-bind也可以缩写为‘ : ’，可以用于响应式地更新

可以看到我们使用v-bind或者缩写的：都可以动态的把url数据绑定到image的src属性上。

这里要注意文本插值和属性绑定是有区别的

文本插值绑定数据，需要用{ {}}
v-bind属性绑定，不需要{ {}}

7-2，绑定数据的读取

我们上面通过{ {}}绑定数据到data里，我们绑定的数据有时候也需要用，而使用绑定的数据，可以通过this.数据名来使用

可以看到我们通过this.name就可以获取name绑定的数据。

7-3，函数的学习

函数也可以叫做方法（Methods）
它是组件中定义的函数，它们可以被模板中的事件监听器调用，或者在组件的生命周期钩子中使用。

函数的两种使用方式如下图：

我们的函数一般是写在js逻辑区域的methods里，比如我们定义一个getname函数，有下面两种写法。

石头哥这里推荐第一种方式定义函数，这也更简单。

八，条件渲染

Vue 3 中条件渲染主要通过以下几种指令实现：

8-1，v-if

v-if：这是最基本也是最常用的条件渲染指令。它用于条件性地渲染一块内容，只有当指令后的表达式求值为真时，绑定的元素或组件才会被渲染。

<script>
	export default {
		data() {
			return {
				isLogin: true
			}
		}
	}
</script>
<template>
	<div v-if="isLogin">我是登录成功</div>
	<div v-else>我的未登录</div>
</template>

8-2，v-else

v-else：紧跟在v-if或v-else-if之后，表示当前面的条件都不满足时渲染的内容。

如我们前面的v-if里的未登录，就是当条件为false时，就会显示对应的内容。

<script>
	export default {
		data() {
			return {
				isLogin: false
			}
		}
	}
</script>
<template>
	<div v-if="isLogin">我是登录成功</div>
	<div v-else>我是未登录</div>
</template>

8-3，v-else-if

v-else-if：用于链式判断多个条件，类似于JavaScript中的else if语句。v-else-if 和 v-else 与 v-if 配合使用，提供类似于传统 JavaScript 中的 if-else-if-else 结构。v-else-if 可以链式使用，而 v-else 用来表示最后的“否则”情况。

<script>
	export default {
		data() {
			return {
				score: 88
			}
		}
	}
</script>
<template>
	<div v-if="score > 90">非常优秀</div>
	<div v-else-if="score > 80">良好</div>
	<div v-else-if="score > 59">及格</div>
	<div v-else>不及格</div>
</template>

在Vue 3中，这些条件渲染指令的工作方式与Vue 2相似，但在内部实现上进行了优化，以提高应用的性能和响应速度。

九，列表渲染

在 Vue 3 中，列表渲染通常使用 v-for 指令来完成。v-for 可以绑定到数组或者对象上，用于基于源数据多次渲染一个元素或组件。以下是一些关于 Vue 3 列表渲染的基础知识和示例。

9-1，基本用法

数组的渲染

当你有一个数组并且想要渲染出列表时，可以使用 v-for 指令：

	<ul>
		<li v-for="item in items">{
  
   
   {item}}</li>
	</ul>

在这个例子中，items是一个数组，v-for指令遍历这个数组，将每个元素赋值给item，并在每次迭代中渲染一个li元素。
对应的数据如下

<script>
	export default {
		data() {
			return {
				items: [
					"列表1",
					"列表2",
					"列表3",
					"列表4",
					"列表5",
					"列表6",
				]
			}
		}
	}
</script>
<template>
	<ul>
		<li v-for="item in items">{
  
   
   {item}}</li>
	</ul>
</template>

页面上显示如下

其实我们列表这里用的最多的就是商品列表或者文章列表。我接下来以一个新闻列表为例，教大家深入的学习下

9-2，文章列表的实现

我们通常显示文章列表的时候会显示图片和标题，那么我们这节就来写一个简单的新闻文章列表页。

9-2-1，显示图片列表

我们这里先显示图片的列表，这里需要大家提前去找一个图片，作为我们的新闻图片。把找到的图片，放到static文件夹里。如我这里用了一个我的头像图片。这里给大家的建议，图片名不要用中文，要不然会出现一些兼容的问题。

所以我把图片改下名，用拼音就行。

然后我们就可以显示图片了。我这里还是用v-for来显示图片列表

可以看到我们在列表显示了3个图片，并且也显示了3个简单的标题。

9-2-2，显示图片和文字列表

我们上面显示的图片列表都是一样的，那么我们就再找三张不一样的图片来。还是放到static文件里

然后我们要自己组装下列表的数据，我们现在用的是本地图片和数据，后面正式开发时，可能就是先把图片和标题存到数据库里，然后获取数据库，显示列表。当然这个后面要学习的，我们现在还是先学习我们的简单列表。
如我们组装的数据如下

[{
	img: '/static/1.jpg',
	title: '我是新闻标题一'
}, {
	img: '/static/2.jpg',
	title: '我是新闻标题二'
}, {
	img: '/static/3.jpg',
	title: '我是新闻标题三'
}]

我们这里的img就是我们每条文章数据的图片，title就是标题

这里要注意，用英文状态下的单引号， /static/是指向我们的static目录，然后/static/1.jpg就是使用static目录的1.jpg这个图片。
这样的我们就可以显示一个简单的新闻列表出来了

对应的代码完整的贴给大家

<script>
	export default {
		data() {
			return {
				items: [{
					img: '/static/1.jpg',
					title: '我是新闻标题一'
				}, {
					img: '/static/2.jpg',
					title: '我是新闻标题二'
				}, {
					img: '/static/3.jpg',
					title: '我是新闻标题三'
				}]
			}
		}
	}
</script>
<template>
	<view v-for="item in items">
		<image :src="item.img"></image>
		<view>{
  
   
   {item.title}}</view>
	</view>

</template>

9-3，使用 `key`

在渲染列表时，为每个元素提供一个唯一的 key 是非常重要的。Vue 使用这个 key 来跟踪每个节点的身份，从而在数据变化时高效地更新 DOM。

通常，key 应该是一个唯一标识列表中每一项的值，比如一个唯一 ID：

<li v-for="item in items" :key="item.id">{
  
   
   { item.text }}</li>

如果列表项中没有唯一 ID，你也可以使用数组索引作为最后的手段：

<li v-for="(item, index) in items" :key="index">{
  
   
   { item.text }}</li>

但请注意，使用索引作为 key 可能会引起性能问题，尤其是在列表项被重新排序或添加/删除时。
我们正式开发的时候，后台的每条数据都会有自己的唯一id，我们就可以用这个id作为我们的key

十，事件处理的学习

10-1，事件处理

我们在vue3里做事件处理主要是为了监听事件,
它是组件交互的核心部分，
可以通过多种方式来实现。以下是一些常见的监听事件方法和实践：

10-1-1，监听点击事件

接下来我们学习事件，我们常用的事件如下，这里我们先重点讲解下@click点击事件和
@input获取输入值的事件

我们如果想给一个组件定义点击事件，就要用到uni的事件处理，由于uni是基于vue语法的额，所以我们给uni里的组件定义点击事件，就要用到vue的语法。
我们给一个组件绑定点击事件的语法如下：

我们可以使用 v-on 指令来监听点击事件，从而执行 JavaScript 代码。
v-on 指令可以缩写为 @ 符号。

语法格式：

v-on:click="methodName"
或
@click="methodName"

methodName就是函数名，如下所示

可以看出我们使用v-on和@都可以定义点击事件，我这里推荐大家用@简写的方式

10-1-2，监听用户输入事件

监听用户输入事件其实主要就是为了获取用户输入信息
获取input输入框里用户输入的内容有两种方式

@input结合函数
v-model数据绑定获取输入内容(推荐)

@input结合函数获取输入内容

我们获取用户输入会用到@input事件
@input主要是为了获取用户的输入内容。
@input的定义如下图，其中的getname就是我们定义的函数，用来接收用户输入的。

在布局里定义好bindinput事件以后，在js页面再定义一个和事件名一样的函数即可。

然后就可以监听用户输入了

视频里会作详细讲解。

10-1-3，v-model双向绑定数据获取输入内容

v-model是什么
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
为什么使用v-model
v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。
v-model的原理简单描述
v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化

具体的语法如下：

这样当我们用户输入内容后，输入的内容就可以绑定到name上，后面直接使用就行了。

下面来对比下@input和v-model的代码
可以发现v-model比着@input，很明显的节省了一步定义函数getname，所以这里推荐大家使用v-model来获取input输入内容。

另外，v-model 还可以用于各种不同类型的输入数据的获取，用于在表单类元素(单选、多选、下拉选择、输入框等)上双向绑定数据，后面学习中用到我会再做具体讲解。

10-2，事件传参

我们有时候用点击事件，需要把当前页面上的数据作为参数传递给函数的。比如我从新闻列表页点击其中一篇文章，然后进入新闻详情页，这个时候我们就需要把文章id传递给函数，然后再继续携带到详情页，通过这个id来请求对应的新闻详情。

10-2-1，传递字符串

事件传参的语法如下

@click="事件名(参数)

我们先来看简单的参数传递，我这里随便传递一个字符串试下

点击后可以打印出来参数

10-2-2，传递属性值

回到我们前面的那个新闻列表，我们增加下点击事件，并且传递参数

我们点击不同的文章，可以看到打印出不同的id

10-2-3，传递多个属性值

我们也可以同时传递多个属性值，比如我们传递id和标题

可以看到我们可以同时传递id和标题，并且打印出来。

10-2-4，传递对象

当然有的同学可能想直接把对象作为参数传递，这样我们就可以想用那个数据就直接使用那个数据了

可以看到我们把整个item作为参数传递了，这样我们想打印id和img就可以直接使用了。

10-2-5，传递event

有时候我们要用到event做一些调试比对的工作，那么我们该怎么传递event呢，如下图所示。

10-3，综合案例~简单加法计算器

先看下简单的效果图

我会在视频里带大家一行行敲出来。

完整代码贴出来给到大家

<template>
	<input type="number" @input="getA" placeholder="输入数字a" />
	<div>+</div>
	<input type="number" @input="getB" placeholder="输入数字b" />
	<div @click="add">求和</div>
	<div>结果：a+b={
   
    
    {
   
    
    num}}</div>
</template>

<script>
	export default {
   
    
    
		data() {
   
    
    
			return {
   
    
    
				a: 0,
				b: 0,
				num: 0
			}

		},
		methods: {
   
    
    
			getA(e) {
   
    
    
				console.log('a=', e.target.value);
				this.a = e.target.value
			},
			getB(e) {
   
    
    
				console.log('b=', e.target.value);
				this.b = e.target.value
			},

			add() {
   
    
    
				this.num = parseInt(this.a) + parseInt(this.b)
			},
		}
	}
</script>

<style>
</style>

课后作业：自己实现一个简单减法计算器

十一，HBuilder里创建vue3项目

我们在uniapp移动端里已经把vue3常用的基本语法讲完了，接下来就再创建一个纯正的vue3项目来给大家讲接下来的知识点，为了让大家多学习些知识。大家认真跟着往下学习即可。

11-1，安装node

我们去node官网安装最新的即可

但是node官网是国外的网站，有时候访问比较慢，所以我给大家准备好了node安装包，评论区留言，石头哥可以提供给你。给大家准备的是最新版的20.16，如果你学习的时候比石头哥的版本还新，可以自行下载最新版。

安装很简单，双击然后一直下一步即可，所有的都保持默认就行。有一点需要注意的就是要选中Add to PATH

然后等待安装完成即可。

我们前面安装好node以后，最好重启下电脑。

因为node是国外网站，有的同学使用npm加载依赖的时候可能会特别慢，这个时候把npm的镜像设置为国内的，这样加载依赖的时候就会比较快了。

npm查看镜像和设置国内镜像

查看当前镜像 npm get registry
设置国内阿里云镜像 npm config set registry https://registry.npmmirror.com/

11-2，HBuilder里创建vue3项目

先在桌面创建一个空白文件夹demo2，然后去新建项目

新建项目时选择普通项目，然后自己编写项目名，源码目录选上面新建的demo2，模板就选vue3带vite的。

等待项目创建

11-3，Hbuilder开发者工具里使用npm

打开demo2里的App.vue

然后打开终端命令行两种方式

1，点运行然后点运行到终端，选中npm install，这也是国产开发者工具比较人性化的地方，直接把要执行的命令行帮我们弄好了。如果有npm install记得点下npm install。如果没有npm install忽略这一步即可。
2，点运行按钮，如果有npm install记得点下npm install。如果没有npm install忽略这一步即可。

然后等待node帮我们加载依赖

加载好可以看到demo2目录下多了一个这个。

这里就是node帮我们下载的依赖

11-4，运行项目

我们相关依赖都加载好了，接下来就可以运行项目了。运行项目使用npm run dev即可

运行好以后有一个地址，我们到浏览器里打开

也可以直接点击打开，可以使用内置浏览器和电脑上的浏览器打开。

打开后如下

这样我们一个vue3项目就正式创建并运行起来了。可以看到默认给我们创建的vue页面，使用的是vue3组合式api，我们现在还在入门，所以还是需要学习选项式api，后面会给大家讲组合式api的。大家不用着急。

我们把页面简单改造下。

这样就是我们熟悉的结构了。

11-5，认识vue3项目结构重要文件

我们创建的vue3目前如下。我先把里面重要的文件给大家介绍下。其他的不重要的后面用到的时候再讲。

11-5-1，index.html文件

在 Vue 3 项目中，index.html 文件通常是项目的入口 HTML 文件，它负责加载 JavaScript 和其他静态资源。

index.html 的作用：

HTML 基础结构：提供了一个基本的 HTML5 页面结构。
Vue 应用挂载点：通过
定义了 Vue 应用的挂载点。
引入主要 JavaScript 文件：通过

可以看到我们的vue3项目就是挂载在index.html里的

对应的代码

11-5-2，main入口文件

既然index.html里引入了main，那么我们就来看看这个main，
main里的核心代码其实很少，我们来看看

main.js 文件是 Vue 3 应用程序的入口文件，它负责引导和配置应用程序。在这个文件中，你创建 Vue 实例、配置路由、安装插件、注册全局组件等。通过 app.mount(‘#app’)，将 Vue 应用挂载到 HTML 中的指定元素上，从而启动整个应用。

代码解释

1，导入必要的模块：
import { createApp } from ‘vue’：从 Vue 主包中导入 createApp 函数，这是 Vue 3 中创建应用实例的方法。
import App from ‘./App.vue’：从 ./App.vue 文件中导入根组件 App，这是 Vue 应用的顶级组件。
创建和挂载应用：
createApp(App)：使用 createApp 函数创建一个新的 Vue 应用实例，并传入根组件 App。
.mount(‘#app’)：将应用实例挂载到 HTML 中具有 id=“app” 的元素上。如下图：

main.js的其他作用

1，配置和注册全局组件：

注册全局组件，使得这些组件可以在整个应用中被复用。如我们后面学习的Element组件。就可以在main里做全局注册

2，引入公共样式：
引入全局样式文件，如 CSS 或 SCSS 文件。

3，引入 Vue 和其他依赖库：
导入 Vue 本身和其他可能需要的库，如 Vuex、Vue Router 等。

11-5-3，App.vue文件

我们看到前面main里引入了App.vue，那么App.vue是做什么用的呢？

App.vue 是 Vue 3 应用的根组件，它负责组织和呈现整个应用的布局结构。它通常包含了应用的基础样式和布局，并且可以引入其他组件来构建完整的用户界面。

App.vue 是 Vue 应用的入口组件，所有其他组件都将嵌套在这个根组件内部。它是应用的第一个渲染出来的组件，通常包含了应用的最高级别的布局和结构。

其实可以这么理解，App.vue就是项目的根组件，通过main.js挂载到index.html页面上显示。然后其他组件通过排列组合在App.vue显示各种页面。

15-5-4，HelloWord.vue组件

我们既然在App.vue里引入了HelloWord.vue组件，接下来就来看看它。

我们就可以在HelloWord.vue组件里编写代码显示到App.vue上了。
我们自己写的vue组件可以放在components目录下。

11-6，组件

什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。组件化开发是一种软件设计方法，它将大型应用程序分解为独立、可复用、功能明确的小单元——组件。

组件化开发的好处
前端组件化开发的好处主要体现在以下两方面：

提高了前端代码的复用性和灵活性
提升了开发效率和后期的可维护性

vue3 中的组件化开发
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。HolloWod.vue也是一个组件。

vue 组件组成结构
每个 .vue 组件都由 3 部分构成，分别是：

template -> 组件的模板结构
script -> 组件的 JavaScript 行为
style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

vue组件的注册引用和父子组件
组件之间可以进行相互的引用。如我们在App.vue里可以注册并引用Home.vue和About.vue,这个时候App.vue就是父组件了，而Home和About就是App的子组件。

先给大家演示下选项式api里组件注册和引用的代码。等后面章节学到组合式api的时候再给大家演示组合式里注册和引用组件的代码。

11-7，选项式api注册和引用组件

我们使用选项式注册和使用组件还是很麻烦的。看下面代码。

后面学习组合式api的时候，大家可以对比下，组合式api有多简单。

十二，组件的生命周期

我们的vue3组件和人生一样，都有一个从出生到死亡的过程，我们可以在生命周期的各个时间段去处理不同的业务逻辑，比如进入抢购页面生成一个倒计时的计时器，然后在退出抢购页面的时候销毁这个计时器。

12-1，Vue3 生命周期函数

生命周期函数：是组件实例从创建到销毁过程中不同时间点自动调用的函数。
有时候也叫生命周期钩子，是指在组件页面实例的创建、更新、销毁等过程中，Vue 自动调用的一系列方法。在这些步骤中，组件会触发一系列称为"生命周期钩子"的函数，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

12-2，生命周期图谱

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，只需要大致知道有那些东西即可，以后它将是一个有用的参考。到时候返回来看下这个图谱就行了。不用死记硬背。

12-3，每个钩子函数的作用

以下是 Vue.js 生命周期钩子函数，也是有个印象即可，不需要死记硬背。

钩子名称	触发时机
beforeCreate	实例初始化之后，数据观测和事件配置之前调用。
created	实例创建完成后立即调用，此时实例已经完成数据观测、属性和方法的运算、watch/event 事件回调。
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。页面组件渲染完成执行这个函数，`通常我们做的网络数据的请求可以放到这里`
beforeUpdate	数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
beforeUnmount	实例卸载之前调用。
unmounted	实例被卸载之后调用。

以下是详细介绍 Vue 组件的生命周期钩子：

Vue.js 中的生命周期钩子函数是指在组件实例的创建、更新、销毁等过程中，Vue 自动调用的一系列方法。通过这些钩子函数，可以在组件的不同生命周期阶段执行特定的操作。以下是详细介绍 Vue 组件的生命周期钩子：

1. beforeCreate
说明: 实例初始化之后，数据观测和事件配置之前调用。
用法: 可以在这个阶段初始化一些未被 Vue 代理的数据。
2. created
说明: 实例创建完成后立即调用，此时实例已经完成以下配置：数据观测、属性和方法的运算、watch/event事件回调，挂载阶段还没开始。
用法: 可以在这个阶段访问并修改数据，但还没有挂载 DOM。
3. beforeMount
说明: 在挂载开始之前被调用：相关的 render 函数首次被调用。
用法: 在挂载之前执行一些操作，例如修改 DOM 结构等。
4. mounted
说明: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
用法: 可以在这个阶段操作 DOM，执行与 DOM 相关的逻辑。
5. beforeUpdate
说明: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
用法: 可以在这个阶段对更新之前的状态进行访问。
6. updated
说明: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
用法: 可以在这个阶段操作 DOM，但避免在此期间更改数据，因为可能导致无限循环更新。
7. beforeUnmount
说明: 实例卸载之前调用。
用法: 在实例被卸载之前进行一些清理操作，例如取消事件监听等。
8. unmounted
说明: 实例被卸载之后调用。
用法: 在实例被卸载之后进行一些清理操作，例如销毁定时器等。

<script>
	export default {
		beforeCreate() {
			console.log('beforeCreate: 实例刚刚被创建');
		},
		created() {
			console.log('created: 实例创建完成');
		},
		beforeMount() {
			console.log('beforeMount: 挂载开始之前');
		},
		mounted() {
			console.log('mounted: 实例已挂载');
		},
		beforeUpdate() {
			console.log('beforeUpdate: 数据更新之前');
		},
		updated() {
			console.log('updated: 数据更新完成');
		},
		beforeUnmount() {
			console.log('beforeUnmount: 实例卸载之前');
		},
		unmounted() {
			console.log('unmounted: 实例已卸载');
		}
	}
</script>

再给大家演示下更新的钩子函数，我们在页面数据更新的时候会执行

其余2个beforeUnmount和unmounted目前没法演示，后面学习过程中，用到的地方会给大家做相关演示。

十三，组合式API

学完选项式我们接下来学习组合式。这样你就能更好的看清楚两者的区别了。

1,选项式和组合式的区别和联系

Vue.js 是一个流行的前端JavaScript框架，它提供了两种主要的API设计模式：选项式（Options API）和组合式（Composition API）。这两种模式在Vue 3中并存，允许开发者根据自己的喜好和项目需求选择使用。

选项式（Options API）

选项式API是Vue 2和Vue 3中的传统方式，它通过组件的选项对象来组织组件的逻辑。这个选项对象包含了组件的各种配置，如数据（data）、方法（methods）、生命周期钩子（lifecycle hooks）、计算属性（computed properties）、侦听器（watchers）等。

特点：

组织结构：选项式API将组件的不同功能分布在选项对象的不同属性中。
熟悉性：对于熟悉Vue 2的开发者来说，选项式API非常直观和易于理解。
适用性：适合较小的组件或者逻辑较为简单的场景。

组合式（Composition API）

组合式API是Vue 3引入的新特性，它提供了一种新的方式来组织组件逻辑。组合式API通过一组函数来组合组件的逻辑，使得状态和逻辑可以更容易地复用和组织。

特点：

逻辑复用：通过使用setup函数，开发者可以更容易地复用组件逻辑。
组织结构：所有的状态和逻辑都在setup函数中定义，这有助于保持组件的整洁和组织性。
适用性：适合大型组件或者逻辑较为复杂的场景，特别是当组件需要共享状态或逻辑时。

区别和联系

组织方式：选项式API通过分散在选项对象中的属性来组织逻辑，而组合式API则集中在setup函数中。
复用性：组合式API通过setup函数提供了更好的逻辑复用机制。
可读性：对于复杂的组件，组合式API可能提供更好的可读性和维护性。
共存：在Vue 3中，两种API可以共存，开发者可以根据需要选择使用。

总的来说，选项式API和组合式API提供了不同的组织和复用组件逻辑的方式。选项式API适合快速开发和小型项目，而组合式API则更适合大型项目和需要高度复用逻辑的场景。开发者可以根据个人喜好和项目需求灵活选择。

2，为什么要引入组合式API

我们通过上图可以看出，组合式让代码更简介，逻辑更清晰，后期代码量大了也比选项式更好维护。

选项式api一个业务的属性方法都写的太分散，代码量少还无所谓，代码量一旦大起来，就很不好维护了。
组合式api，正好解决这个难题，上图右边的可以看出，我们一个业务的相关代码都可以写在一起，即便后面代码量再大，也是在一起写的。维护起来就很方便了。

选项式和组合式创建函数的方式有点不一样

选项式函数的创建方式有两种
函数名(){}
函数名：function(){}
组合式函数创建方式
function 函数名(){}

3，setup语法糖

在 Vue 3 中，<script setup> 是一种特殊的语法糖，它为 Vue 单文件组件（SFC）提供了一种更简洁、更符合 Vue 组合式 API 的编写方式。简单来说，<script setup> 让开发者能够以一种更接近 JavaScript 或 TypeScript 的方式来组织代码，而不是传统的 Vue 组件选项对象的方式。

下面是一些 <script setup> 的特点和优势：

无需 export default：
使用 <script setup> 时，你不需要编写 export default 来定义组件的选项，因为 <script setup> 已经隐式地为你创建了一个组件实例。
直接使用变量和函数：
在 <script setup> 中定义的变量和函数会自动成为组件的响应式属性和方法，可以直接在模板中使用。
更好的组织逻辑：
<script setup> 鼓励开发者使用组合式 API（如 ref, reactive, computed, watch 等），这有助于更清晰地组织组件的逻辑。
无需 this 关键字：
由于 <script setup> 内部的变量和函数自动与组件实例关联，你不需要使用 this 来访问它们。
支持 TypeScript：
<script setup> 与 TypeScript 有很好的集成，可以提供类型推断和类型检查。
更少的模板代码：
使用 <script setup> 时，模板和逻辑代码可以更紧密地结合在一起，减少了模板中的重复代码。

举个例子，一个使用 <script setup> 的 Vue 3 组件可能看起来像这样：

<template>
  <div>{
  
   
   { count }}</div>
  <button @click="add">增加</button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

function add() {
  count.value++;
}
</script>

在这个例子中，count 是一个响应式的引用，add 是一个方法，它们都可以直接在模板中使用，而不需要额外的 export default 或者在模板中使用 this 来引用。

<script setup> 是 Vue 3 中一个非常强大的特性，它为构建现代化的前端应用提供了一种更高效、更直观的方式。

4，ref创建简单的响应式数据

在 Vue 3 中，ref 是一个非常重要的响应式引用（reactive reference）API。它允许你声明一个响应式的变量，Vue 能够自动追踪这个变量的变化，并在它们变化时更新 DOM。

以下是 ref 的一些关键点：

声明响应式变量：
使用 ref 声明的变量会自动被 Vue 追踪，当这个变量的值发生变化时，Vue 会自动更新依赖于这个变量的 DOM。
```
import {
     
      
       ref } from 'vue';

const count = ref(0); // 声明一个初始值为 0 的响应式变量
```
访问和修改值：
ref 创建的变量通过 .value 属性访问和修改它的值。这是为了避免直接修改原始变量，从而确保响应系统的一致性。
```
count.value++; // 修改响应式变量的值
console.log(count.value); // 访问响应式变量的值
```
模板中的使用：
在 Vue 模板中，你可以直接使用 ref 声明的变量，而不需要 .value。
```
<template>
  <div>{
    
     
     { count }}</div>
</template>
```
与组件的生命周期整合：
ref 可以在组件的 setup 函数中使用，这使得它非常适合用于组件的初始化状态。
支持 TypeScript：
当使用 TypeScript 时，ref 能够很好地与类型系统整合，提供类型安全。
与 Vue 的其他响应式 API 结合使用：
ref 可以与 reactive, computed, watch 等其他响应式 API 结合使用，构建复杂的响应式逻辑。
内存管理：
ref 创建的响应式引用会在组件卸载时自动被清理，无需手动管理内存。

下面是一个简单的例子，展示如何在 Vue 3 组件中使用 ref：

在这个例子中，name 是一个响应式字符串，它的值可以在模板中直接使用，并且可以通过点击按钮来切换显示。ref 的使用让状态管理变得简洁而高效。age不是响应式数据，所以无法动态修改。

5，综合案例1~实现简单的加法计算器

还记得我们前面第事件处理的章节里讲了用选项式实现简单的加法计算器

我们既然学了组合式api，那么就用组合式api再来实现下吧。

是不是可以看出改造后有很多不同。但是效果是一样的

6，reactive创建复杂的响应式数据

在 Vue 3 中，reactive 是一个核心的响应式 API，它允许你创建一个响应式的 JavaScript 对象。与 ref 不同，reactive 适用于复杂数据类型，如对象或数组，而 ref 更适合基本数据类型。

以下是 reactive 的一些关键特性：

创建响应式对象：
使用 reactive，你可以将一个普通 JavaScript 对象转换为响应式的。Vue 会自动追踪这个对象中所有属性的变化。

import {
     
      
       reactive } from 'vue';

const state = reactive({
     
      
       count: 0 }); // 创建一个响应式对象

访问和修改属性：
响应式对象的属性可以直接访问和修改，不需要 .value 属性。Vue 会追踪这些属性的变化。
```
state.count++; // 直接修改响应式对象的属性
console.log(state.count); // 直接访问响应式对象的属性
```
深度响应式：
reactive 可以创建深度响应式的对象，这意味着对象内部嵌套的对象或数组也会是响应式的。
模板中的使用：
在模板中，可以直接使用 reactive 对象的属性，Vue 会自动更新依赖于这些属性的 DOM。
```
<template>
  <div>{
    
     
     { state.count }}</div>
</template>
```
与 Vue 的其他响应式 API 结合使用：
reactive 可以与 ref, computed, watch 等其他响应式 API 结合使用，构建复杂的响应式逻辑。
内存管理：
reactive 创建的响应式对象会在组件卸载时自动被清理，无需手动管理内存。
不可序列化性：
reactive 对象是不可序列化的，这意味着它不能被转换为 JSON 字符串。
支持 TypeScript：
当使用 TypeScript 时，reactive 能够很好地与类型系统整合，提供类型安全。

下面是一个简单的例子，展示如何在 Vue 3 组件中使用 reactive：

<template>
  <div>
    <p>{
  
   
   { state.count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

// 使用 reactive 创建响应式对象
const state = reactive({ count: 0 }); 

function increment() {
  state.count++; // 直接修改响应式对象的属性
}
</script>

在这个例子中，state 是一个包含 count 属性的响应式对象。通过点击按钮调用 increment 函数，count 的值会递增，并且模板中的显示会自动更新。reactive 的使用使得状态管理变得简洁而高效，特别适合处理复杂的状态逻辑。

7，综合案例2~新闻列表带点赞

我们既然学了reactive可以创建响应式对象和数组，那接下来用一个综合案例来给大家演示下。先看下简单的效果图。

视频里会带大家一点点敲代码，并做下简单的美化

代码先贴给大家

<template>
	<h1>新闻列表带点赞</h1>
	<div v-for="item in list">
		{
   
    
    {
   
    
    item.title}} 点赞数{
   
    
    {
   
    
    item.like}}
		<button @click="addLike(item.id)">点赞</button>
	</div>
</template>

<script setup>
	import {
   
    
    
		reactive
	} from 'vue';

	// 新闻列表数据
	let list = reactive([{
   
    
    
			id: 0,
			title: '新闻1',
			like: 0
		},
		{
   
    
    
			id: 1,
			title: '新闻2',
			like: 0
		},
		{
   
    
    
			id: 2,
			title: '新闻3',
			like: 0
		},
		{
   
    
    
			id: 3,
			title: '新闻4',
			like: 0
		},
	])
	// 点赞函数
	function addLike(e) {
   
    
    
		console.log('==== e :', e);
		list[e].like++
	}
</script>

<style>

</style>

代码解释
这段代码是一个 Vue 3 的单文件组件（SFC），使用了 <script setup> 语法糖。下面是对这段代码的逐行解释：

<template> 标签定义了组件的模板部分，即用户界面的 HTML 结构。
<h1>新闻列表带点赞</h1> 定义了一个标题，显示为“新闻列表带点赞”。
<div v-for="item in list"> 使用了 Vue 的 v-for 指令来遍历 list 数组，并为每个新闻项创建一个 <div> 元素。
{ {item.title}} 和 { {item.like}} 是插值表达式，用于在 DOM 中显示每个新闻项的标题和点赞数。
<button @click="addLike(item.id)">点赞</button> 定义了一个按钮，当点击时会触发 addLike 方法，并传递当前新闻项的 id 作为参数。
</template> 结束模板部分。
<script setup> 标签定义了组件的脚本部分，使用了 Vue 3 的 <script setup> 语法糖，它允许以更简洁的方式编写组件逻辑。
import { reactive } from 'vue'; 从 Vue 引入 reactive 函数，用于创建响应式数据。
let list = reactive([...]) 定义了一个响应式的新闻列表 list，初始包含四个新闻项，每个新闻项都有 id、title 和 like 属性。
function addLike(e) { ... } 定义了一个 addLike 函数，用于处理点赞操作。当按钮被点击时，这个函数会被调用，并接收一个参数 e，这个参数是当前新闻项的 id。函数内部通过 console.log 打印 e 的值，然后找到对应 id 的新闻项，并将其 like 属性的值增加 1。
</style> 标签留空，用于后续添加组件的 CSS 样式。

这段代码实现了一个简单的新闻列表，每个新闻项都有一个标题和点赞数，用户可以点击“点赞”按钮来增加对应新闻的点赞数。点赞操作通过 addLike 函数实现，该函数直接修改了响应式状态 list 中对应新闻项的 like 属性，触发 Vue 的响应式系统更新 DOM。

8，ref 和 reactive的区别

ref 和 reactive 都是 Vue 3 中用于创建响应式数据的 API，但它们在使用场景和行为上有一些关键的区别：

数据封装