Vue3学习（后端开发）

目录

一、安装Node.js

二、创建Vue3工程

三、用VSCode打开

四、源代码目录src

五、入门案例——手写src

六、测试案例

七、ref和reactive的区别

---

一、安装Node.js

下载20.10.0 LTS版本 

https://nodejs.org/en

使用node命令检验安装是否成功

node

二、创建Vue3工程

在桌面右键打开终端，输入创建命令。

npm create vue@latest

输入项目名称，用小写字母和数字，用 _ 或 - 分隔。

接下来就是一些选项配置，这里只选使用TypeScript语法。

到这里Vue3项目就创建好了，可以在桌面上找到。

三、用VSCode打开

使用VSCode打开刚才建好的项目

这里会推荐两个官方插件，点击安装即可。

 

打开env.d.ts文件，发现报错，原因是没有下载依赖。

打开终端，使用npm i命令下载依赖。

npm i

新增了一个node_modules目录

下载好后重新打开VSCode

项目中的index.html文件是入口文件，类似于SpringBoot项目中的启动类。

我们先将index.html文件里面的内容全部注释，然后自己简单的写一个html页面。

打开终端，使用npm run dev命令启动项目。

npm run dev

按住Ctrl键然后单击http://localhost:5173/打开

四、源代码目录src

和后端项目一样，src目录用于存放源代码。

在入口文件index.html中，引入了src目录下的main.ts文件。

main.ts文件内容

其中import的作用就是导入，类似于Java中的导包。

import './assets/main.css'

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

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

导入样式 

import './assets/main.css'

从vue中导入createApp，然后下面就能用createApp了。

import { createApp } from 'vue'

导入App组件，App组件是根组件，我们写的其他组件放到根组件中。

import App from './App.vue'

用根组件App创建应用，挂载到一个id为app的容器中。

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

这个id为app的容器就在index.html中

components目录存放我们自己写的组件，这些组件要引入到App.vue根组件中，assets目录里面是一些样式。

在src中main.ts和App.vue是必不可少的

五、入门案例——手写src

创建src目录，新建main.ts和App.vue

main.ts

// 引入createApp用于创建应用
import { createApp } from 'vue'
// 引入App根组件
import App from './App.vue'

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

在.vue文件中可以写什么呢？

Person.vue

我们在src中创建components目录，存放我们自己写的组件Person.vue，然后引入到App.vue根组件中。

App.vue

在App.vue中不写内容，而是引入其他组件。

在Person.vue中

六、测试案例

我们将项目运行起来，在浏览器中打开。

点击对应的按钮，页面成功地做出了响应。

七、ref和reactive的区别

先来看用ref定义的数据是什么样的

还是用上面的案例，在浏览器控制台中输出name。

可以看到是一个RefImpl对象，name的值变成了这个RefImpl对象中的属性value的值。所以在案例中我们用name的值是用name.value，但是在插值语法中是不用.value的。

插值语法：

 

下面就是插值语法，就是把值插进去。

 

姓名：{{ name }}
年龄：{{ age }}

再来看用reactive定义的数据是什么样的

下面代码是报错了的，原因是reactive定义的数据必须是对象类型。

let name = reactive('艾伦')

定义对象类型的数据

let person = reactive({"name":"艾伦", "age":20})

查看控制台输出，可以看到是一个Proxy(Object)对象。

这个时候案例代码可以修改成下面这样，结果依然是一样的。

那么ref是用来定义基本类型的数据的，reactive是用来定义对象类型的数据的？

其实ref也可以定义对象类型的数据

let person = ref({"name":"艾伦", "age":20})

查看控制台输出

依然是一个RefImpl对象，不过里面还有一个Proxy(Object)对象，所以用ref定义对象类型的数据本质上是用reactive。

此时案例中的代码应该修改成下面这样的

使用ref就必须用到.value，在插值表达式中不需要。

总结

ref用来定义：基本类型的数据、对象类型的数据

reactive用来定义：对象类型的数据

使用原则

1. 若需要一个基本类型的响应式数据，必须使用ref
2. 若需要一个响应式对象，层级不深，ref、reactive都可以
3. 若需要一个响应式对象，且层级较深，推荐使用reactive