vue3

简介

创建vue3工程

基于vue-cli创建

使用webpack脚手架

基于vite创建

vite等价于webpack，前者构建速度更快，对ts、JSX、CSS等支持开箱即用，按需编译，不等待整个应用编译完成。
通过如下命令创建的vue框架的项目文件介绍：

1
npm create vue@latest

初始生成文件中：node_modules为执行npm install命令后生成的包的存放地。
public里放有网页的图标favicon.ico。
src里存放的是源文件，包含编写的.ts、.js和.vue等文件，env.d.ts中存放的是依赖关系，index.html是入口文件。
启动前端项目：找package.json中的scripts中值为vite的键xxx，通过npm run xxx来启动。
vite.config.ts为整个工程的配置文件。
一个.vue文件需要写入三个标签：template(写结构，html)、script(写脚本代码，JS、TS)、style(样式，CSS)。
vue3采用组合式API相较于vue2，将某个组件相关的数据、方法、计算属性等集成在同一个函数中，便于修改。

拉开序幕的setup

setup是vue3中一个新的配置项，值是一个函数。
vue3中可以使用多个根标签，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <template>
        <!-- html -->
        <Person/>
        <Person/>
        <Person/>
    </template>
```   
返回值可以是包括其内定义所有的数据和方法或者一个函数。   
`data()`中可以调用`setup()`中的数据，`data()`和`setup()`两者可以共存。   
#### setup语法糖
多用一个`<script lang = "ts" setup name="xxx">`标签，其内编写的数据直接就是赋值加返回。   
`vue3`的响应式数据的实现方式：    
**ref**，定义基本类型和对象类型数据：
```vue
    import {ref} from 'vue'
    // 哪个变量需要是响应式，就加一个ref()来包括即可。
    // 例如：
    let name = ref("张十三")
    //此后需要修改时需要带上.value，ref()相当于实例化一个对象，真正的值存在`.value`中：
    // 例如：
    function changeName() {
            name.value = "zhang-san"
        }

ref的修改或查看应该作用的对象是.value.
ref对于对象型数据底层还是通过reactive来实现，即Proxy(Objet)的代理类型。
reactive定义对象类型数据：
用法类似ref。
只能用来定义对象类型的响应式数据。
需要注意的是，reactive()生成的只是代理对象，并需要通过.value来获取相应的值，只需要直接引用相应的属性即可。

refvsreactive

ref一定需要带有.value ，可以使用volar插件自动化，
reactive定义的对象在方法中直接重新对象整体赋值，无论是否带有reactive，都不再是响应式数据，可以通过Object.assign()的api来实现响应式数据的再分配。

建议
  1. 若需要一个基本类型的响应式数据，使用ref
  2. 若需要一个响应式对象，且层级不深，两者均可
  3. 若层级较深，使用reactive。

toRefs()

作用是将reactive定义的响应式对象数据的属性解构成响应式数据，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    // 此处只是单纯的解构person，并非响应式数据
    let {name, age} = person
    let {name, age} = toRefs(person) // 此处解构出来的是响应式数据
```  
`toRef`同理，只不过解构的只是其中你指定的特定的数据。   
#### 计算属性
`computed()`相较于方法性能更好，计算属性会有缓存.  
例如：
```typescript
    // 此处的computed定义的数据是只读的
         let fullName = computed(() => {
            return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value
         })