# hello_vue3

**Repository Path**: ninghongkang/hello_vue3

## Basic Information

- **Project Name**: hello_vue3
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-07-27
- **Last Updated**: 2025-02-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue3核心技术, vue3

## README

# hello_vue3

# 0 必装插件

TypeScript Vue Plugin (Volar)

Vue Language Features(volar)

<img src="assets/volar.png" alt="Snipaste_2023-10-08_20-46-34" style="zoom:50%;" /> 

<img src="assets/image-20231218085906380.png" alt="image-20231218085906380" style="zoom:42%;" />

# 1 vue3简介

-   2020年9月18日，`Vue.js`发布版`3.0`版本，代号：`One Piece`
-   经历了：[4800+次提交](https://github.com/vuejs/core/commits/main)、[40+个RFC](https://github.com/vuejs/rfcs/tree/master/active-rfcs)、[600+次PR](https://github.com/vuejs/vue-next/pulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview+)、[300+贡献者](https://github.com/vuejs/core/graphs/contributors)
-   官方发版地址：[Release v3.0.0 One Piece · vuejs/core](https://github.com/vuejs/core/releases/tag/v3.0.0)
-   截止2023年10月，最新的公开版本为：`3.3.4`

## 1.1 性能的提升

-   打包大小减少`41%`。
-   初次渲染快`55%`, 更新渲染快`133%`。
-   内存减少`54%`。

## 1.2 源码的升级

-   使用`Proxy`代替`defineProperty`实现响应式。
-   重写虚拟`DOM`的实现和`Tree-Shaking`。

## 1.3 拥抱TypeScript

-   `Vue3`可以更好的支持`TypeScript`。

## 1.4.  新的特性

1.  `Composition API`（组合`API`）：

    -   `setup`

    -   `ref`与`reactive`

    -   `computed`与`watch`

        ......

2.  新的内置组件：

    -   `Fragment`

    -   `Teleport`

    -   `Suspense`

        ......

3.  其他改变：

    -   新的生命周期钩子

    -   `data` 选项应始终被声明为一个函数
    
         - vue2在非组件中，data可以是对象，也可以是函数；组件中必须为函数

    -   移除`keyCode`支持作为` v-on` 的修饰符
         - 例如：v-on:key-up.13 这种形式已被移除 
    
    ......

# 2 创建Vue3工程

## 基于vue-cli创建

- 官方：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

- 目前`vue-cli`已处于维护模式，官方推荐基于 `Vite` 创建项目

    ```shell
    ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
    vue --version
    
    ## 安装或者升级你的@vue/cli 
    npm install -g @vue/cli
    
    ## 执行创建命令
    vue create vue_test
    
    ##  随后选择3.x
    ##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
    ##  > 3.x
    ##    2.x
    
    ## 启动
    cd vue_test
    npm run serve
    ```

## 基于vite创建

-  官网：https://vitejs.cn
- 轻量快速的热重载（`HMR`），能实现极速的服务启动。
- 对 `TypeScript`、`JSX`、`CSS` 等支持开箱即用。
- 真正的按需编译，不再等待整个应用编译完成。
- `webpack`构建 与 `vite`构建对比图如下：

<img src="assets/1683167182037-71c78210-8217-4e7d-9a83-e463035efbbe.png" alt="webpack构建" title="webpack构建" style="zoom:20%;box-shadow:0 0 10px black" />

<img src="assets/1683167204081-582dc237-72bc-499e-9589-2cdfd452e62f.png" alt="vite构建" title="vite构建" style="zoom: 20%;box-shadow:0 0 10px black" />

使用Vite构建Vue3项目参考：https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application



总结

- `vite`项目中，`index.html`是项目的入口文件，在项目最外层
- 加载`index.html`后，`vite`解析`<script type="module" src="xxx"></script>`指向的js
- vue3中是通过`createApp`函数创建一个应用实例

# 3 vue3核心语法

## 3.1 OptionsAPI 与 CompositionAPI

- vue2的API设计是`Options`（配置）风格的
- vue3的API设计是`Composition`（组合）风格的

### vue2选项式风格

```js
data() {
	return {
		name: '张三',
		age: 19,
		tel: '13888888888'
	}
},
methods: {
	showTel() {
		alert(this.tel)
	},
	changeName() {
		this.name = 'zhangsan'
	},
	changeAge() {
		this.age += 1
	}
},
```

### vue3组合式风格

> 注意：
>   组合式 API 通常会与 `<script setup>` 搭配使用

```js
setup() { // setup是一个特殊的钩子，专门用于组合式 API
    //console.log(this) // 在setup函数中的this是undefined，vue3中已经开始弱化this了

    // 数据
    // let name = '张三'  // 非响应式
    // let age = 19
    let name = ref('张三')  // 响应式数据
    let age = ref(19)
    let tel = '13888888888'

    // 方法
    function changeName() {
        // name = 'zhangsan'  // 直接这样子修改数据，可以改变成功，但是DOM没有重新渲染（非响应式）
        // console.log(name)
        name.value = 'zhangsan'
    }

    function changeAge() {
    	age.value += 1
    }

    function showTel() {
    	alert(tel)
    }


	return {name, age, changeName, changeAge, showTel}
}
```

## 3.2 setup

`setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` **“表演的舞台**_**”**_，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。

特点如下：

-   `setup`函数返回的对象中的内容，可直接在模板中使用。
-   `setup`中访问`this`是`undefined`。
-   `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。

小结

- setup是一个特殊的钩子，专门用于组合式 API
- 在setup函数中的this是undefined，vue3中已经开始弱化this了

### setup 与 Options API 的关系

-   `Vue2` 的配置（`data`、`methos`......）中**可以访问到** `setup`中的属性、方法。
-   但在`setup`中**不能访问到**`Vue2`的配置（`data`、`methos`......）。
-   如果与`Vue2`冲突，则`setup`优先。

> 拎得清：
> vue2中的data、methods..与vue3中的setup能共存vue2中的data、methods..等能读取setup中的数据，setup不能读取data、methods的数据

### setup扩展

```vue
<script lang="ts">
  export default {
    name: "Person",
  }
</script>

<script lang="ts" setup>
  // 数据略

  // 方法略
</script>
```

上诉代码中，还需要编写一个不写`setup`的`script`标签，去指定组件名称，比较麻烦，可以借助vite中的一个插件去简化

- 1：npm install vite-plugin-vue-setup-extend -D
- 2：vue.config.ts 做出如下配置

```ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        VueSetupExtend()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})
```

## 3.3 响应式数据

### 3.4.1 ref定义基本类型响应式数据

-   **作用：**定义响应式变量。
-   **语法：**`let xxx = ref(初始值)`。
-   **返回值：**一个`RefImpl`的实例对象，简称`ref对象`或`ref`，`ref`对象的`value`**属性是响应式的**。
-   **注意点：**
    -   `JS`中操作数据需要：`xxx.value`，但模板中不需要`.value`，直接使用即可。
    -   对于`let name = ref('张三')`来说，`name`不是响应式的，`name.value`是响应式的。

在vue2的年代，把数据放在data中，数据默认就是响应式了

```ts
data:{
    return {
        a: 19
    }
}
```

vue3中定义响应式数据

```ts
let name = ref('张三') 
```

### 3.4.2 reactive定义对象类型响应式数据

-   **作用：**定义一个**响应式对象**（基本类型不要用它，要用`ref`，否则报错）
-   **语法：**`let 响应式对象= reactive(源对象)`。
-   **返回值：**一个`Proxy`的实例对象，简称：响应式对象。
-   **注意点：**`reactive`定义的响应式数据是“深层次”的。

```ts
let car = reactive({brand: '奔驰', price: 100})
let games = reactive([
    {id: "g1", name: '王者荣耀'},
    {id: "g2", name: '原神'},
    {id: "g3", name: '创越火线'}
])
let obj = reactive({
    a: {
        b: {
            c: 666
        }
    }
})
```

### 3.4.3 ref定义对象类型响应式数据

-   其实`ref`接收的数据可以是：**基本类型**、**对象类型**。
-   若`ref`接收的是对象类型，内部其实也是调用了`reactive`函数。

### 3.4.4 ref 与 reactive 的对比

宏观角度看：
> `ref`用来定义：基本类型数据、对象类型数据
> `reactive`用来定义：对象类型数据

区别：
> `ref`创建的变量必须使用`.value`（在template中不用），（可以用`volar`插件自动添加`.value`）
> `reactive`重新分配一个新对象，会**失去**响应式（可以使用`Object.assgin`去整体替换）

使用规则（推荐，并不是规范）：
> 若需要一个基本类型的响应式数据，必须使用`ref`
> 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以
> 若需要一个响应式对象，且层级较深，推荐使用`reactive`

## 3.5 toRefs 与 toRef

-   作用：将一个响应式对象中的每一个属性，转换为`ref`对象。
-   备注：`toRefs`与`toRef`功能一致，但`toRefs`可以批量转换。

```ts
let person = reactive({name: '张三', age: 18})

let {name, age} = toRefs(person)
let n = toRef(person, 'name')
```

## 3.6 computed 计算属性

-   作用：根据已有数据计算出新数据（和`Vue2`中的`computed`作用一致）

<img src="assets/computed.gif" style="zoom:20%;" />

总结：

​	计算属性是有缓存的

​	官方描述：一个计算属性仅会在其响应式依赖更新时才重新计算



vue2中定义计算属性的方式

```js
<script lang = "ts" >
export default {
    computed: {   // 这是一个配置项

    }
}
< /script>
```

vue3中定义计算属性

```html
<script lang="ts" setup name="Person">
    import {computed, ref} from 'vue';

    const firstName = ref('zhang')
    const lastName = ref('san')

    // 计算属性
    // 怎么定义的fullName是一个计算属性，且是只读的
    // let fullName = computed(() => {
    //   return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    // })

    // 怎么定义的fullName是一个计算属性，可读可写
    let fullName = computed({
        get() {
            return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
        }
        ,
        set(val) {
            const [str1, str2] = val.split('-')
            console.log('set', val)
            firstName.value = str1
            lastName.value = str2
        }
    })


    function changeFullName() {
        fullName.value = 'li-si'
    }

</script>
```

## 3.7 watch
- 作用：监视数据的变化（和vue2中的watch的作用一致）
- 特点：`vue3`中的`watch`只能监视以下**四种数据**：
  > - `ref`定义的数据
  > - `reactive`定义的数据
  > - 函数返回的一个值（getter函数）
  > - 一个包含上述内容的数组

我们在vue3中使用`watch`的时候，通常会遇到如下情况：

### 情况一

监视`ref`定义的【基本类型】数据：直接写数据名即可，监视的是其`value`值的变化。

```vue
<template>
  <div class="person">
    <h1>情况一：监听【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>


<script lang="ts" setup name="Person">
import {ref, watch} from 'vue'

let sum = ref(0)

function changeSum() {
  sum.value += 1
}

// watch
// 监视响应式数据时，不需要`.value`
const stopWatch = watch(sum, (newVal, oldValue) => {
  console.log('sum变化了 ', newVal)
  if (newVal > 10) {
    stopWatch()
  }
})
</script>
```

### 情况二

监视`ref`定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想要监听对象内部的数据，要手动开启深度监视

>   注意：
>
>   -   若修改的是`ref`定义的对象中的属性，`newValue`和`oldValue`都是新值，因为它是同一个对象
>   -   若修改的整个`ref`定义的对象，`newValue`是新值，`oldValue`是旧值，因为不是同一个对象了

```vue
<template>
  <div class="person">
    <h1>情况二：监听【ref】定义的【对象类型】数据，监视的是对象的地址值，若想要监听对象内部的数据，要手动开启深度监视</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>


<script lang="ts" setup name="Person">
import {ref, watch} from 'vue'

let person = ref({
  name: '张三',
  age: 19
})

function changeName() {
  person.value.name += '~'
}

function changeAge() {
  person.value.age += 1
}

function changePerson() {
  person.value = {name: '里斯', age: 19}
}

// watch
// 参数一：被监视的数据
// 参数二：监视的callback
// 参数三：配置对象（deep、immediate等等）
// 监视响应式数据时，不需要`.value`
// 情况二：监听【ref】定义的【对象类型】数据，监视的是对象的地址值，若想要监听对象内部的数据，要手动开启深度监视
const stopWatch = watch(person, (newVal, oldValue) => {
      console.log('person变化了 ', newVal, oldValue)
    },
    {deep: true}
)
</script>
```

### 情况三

监视`reactive`定义的【对象类型】数据，且默认开启了深度监视

```vue
<template>
  <div class="person">
    <h1>情况三：监听【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <hr>
    <h3>{{ obj.a.b.c }}</h3>
    <button @click="test">修改test</button>
  </div>
</template>


<script lang="ts" setup name="Person">
import {reactive, watch} from 'vue'

let person = reactive({
  name: '张三',
  age: 19
})

let obj = reactive({
      a: {
        b: {
          c: 666
        }
      }
    }
)

function changeName() {
  person.name += '~'
}

function changeAge() {
  person.age += 1
}


function changePerson() {
  // 注意：这样子会把数据变为非响应式
  // person = {name: '里斯', age: 19}
  Object.assign(person, {name: '里斯', age: 19})
}

function test() {
  obj.a.b.c = 999
}

// watch
// 参数一：被监视的数据
// 参数二：监视的callback
// 参数三：配置对象（deep、immediate等等）
// 监视响应式数据时，不需要`.value`
// 情况三：监听【reactive】定义的【对象类型】数据，默认是开启深度监视的（且不可关闭）
const stopWatch = watch(person, (newVal, oldValue) => {
      console.log('person变化了 ', newVal, oldValue)
    }
)

watch(obj, (newVal, oldValue) => {
  console.log('obj变化了', newVal, oldValue)
})

</script>
```

### 情况四

监视`ref`或`reactive`定义的【对象类型】数据中的**某个属性**，注意点如下：

-   1.若该属性值**不是**【对象类型】，需要写成函数形式
-   2.若该属性值**依然是**【对象类型】，可直接编，也可以写成函数，不过建议写成函数

结论：

​	监视的要是对象里面的属性，那么最好写函数式

​	若监视的是对象里面的对象，如果需要关注其内部的细节（内部属性），则需要开启深度监视 

```vue
<template>
  <div class="person">
    <h1>情况四：监视`ref`或`reactive`定义的【对象类型】数据中的**某个属性**</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }} {{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改所有车</button>
  </div>
</template>


<script lang="ts" setup name="Person">
import {reactive, watch} from 'vue'

let person = reactive({
  name: '张三',
  age: 19,
  car: {
    c1: '奔驰',
    c2: '宝马'
  }
})

function changeName() {
  person.name += '~'
}

function changeAge() {
  person.age += 1
}

function changeC1() {
  person.car.c1 = '奥迪'
}

function changeC2() {
  person.car.c2 = '大众'
}

function changeCar() {
  person.car = {c1: '雅迪', c2: '爱玛'}
}


// watch
// 参数一：被监视的数据
// 参数二：监视的callback
// 参数三：配置对象（deep、immediate等等）
// 监视响应式数据时，不需要`.value`
// 情况四：监视`ref`或`reactive`定义的【对象类型】数据中的**某个属性**
// 监视某个属性
watch(() => person.name, (newVal, oldValue) => {
      console.log('person.name变化了', newVal, oldValue)
    }
)
// 监视某个对象
watch(() => person.car, (newVal, oldValue) => {
  console.log('person.car变化了', newVal, oldValue)
}, {deep: true})  // 需要关注对象里的细节，手动开启深度监视

</script>
```

## 3.8 watchEffect

官网：立即运行一个函数，同时响应式的追踪其依赖，并在依赖发生更改时重新执行该函数。

`watch`与`watchEffect`

-   都能监听响应式数据的变化，不同的是监听数据变化的方式不同
-   `watch`：要明确指出监视的数据
-   `watchEffect`：不用明确指出监视的数据（函数中用到那些属性，那就监视那些属性）

## 3.9 Ref标签（标签上的ref属性）

官网：https://cn.vuejs.org/api/built-in-special-attributes.html#ref

作用：用于注册模板引用

-   用于普通`DOM`标签上，获取的是`DOM`节点
-   用于组件标签上，获取的是组件实例对象

## 3.10 （组件的）props的使用



## 3.11 生命周期

概念：`vue`组件实例在创建时要经历一系列的初始化步骤，在此过程中`vue`会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期勾子

规律：

>   生命周期整体分为四个阶段，分别是：**创建、挂载、更新、销毁**，每个阶段都有两个钩子，一前一后。

### 3.11.1 vue2生命周期

生命周期、生命周期钩子、生命周期函数 其实都是讲的一回事

**组件的生命周期**

-   创建阶段（创建前 `beforeCreate`，创建完毕 `created`）

-   挂载阶段（挂载前 `beforeMount`，挂载完毕 `mounted`）

-   更新阶段（更新前 `beforeUpdate`，更新完毕 `updated`）

-   销毁阶段（销毁前 `beforeDestory`，销毁完毕 `destoryed`）



### 3.11.2 vue3生命周期

**组件的生命周期**

-   创建阶段（`setup`）

-   挂载阶段（挂载前 `onBeforeMount`，挂载完毕 `onBounted`）

-   更新阶段（更新前 `onBeforeUpdate`，更新完毕 `onUpdated`）

-   卸载阶段（卸载前 `onBeforeUnmount`，卸载完毕 `onUnmounted`）

常用的钩子：挂载完毕 `onBounted`、更新完毕 `onUpdated`、卸载前 `onBeforeUnmount`

## 3.12 自定义hook

-   什么是`hook`？—— 本质是一个函数，把`setup`函数中使用的`Composition API`进行了封装，类似于`vue2.x`中的`mixin`。
-   自定义`hook`的优势：复用代码, 让`setup`中的逻辑更清楚易懂

```ts
import {onMounted, reactive} from "vue";
import axios from "axios";


export default function () {
    // 数据
    let dogList = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_5295.jpg'])

    // 方法
    async function getDog() {
        try {
            let result = await axios
                .get('https://dog.ceo/api22/breed/pembroke/images/random')
            dogList.push(result.data.message)
            console.log(result.data.message)
        } catch (error) {
            alert(error)
        }
    }

    // hooks中也可以写钩子、计算属性等
    onMounted(() => {
        getDog()
    })

    // 向外部提供东西
    return {dogList, getDog}
}
```



# 4 路由

## 4.1 对路由的理解

<img src="assets/image-20231018144351536.png" alt="image-20231018144351536" style="zoom:20%;border-radius:40px" />

要实现路由说人话就是大致有以下步骤：

1.  要有导航区、展示区
2.  指定路由的具体规则（什么路径，对应着什么组件）
3.  形成一个个 【Xxx.vue】，根据路由路由规则展示不同的组件【Xxx.vue】

## 4.2 基本切换效果

-   `Vue3`中要使用`vue-router`的最新版本，目前是`4`版本

    ```shell
    npm install vue-router
    ```

-   路由配置文件代码如下：

    ```ts
    // 创建一个路由器，并暴露出去
    // 第一步：引入createRouter
    import {createRouter, createWebHistory} from 'vue-router'
    // 引入一个个可能要呈现的组件
    import Home from '@/components/Home.vue'
    import News from '@/components/News.vue'
    import About from '@/components/About.vue'
    
    // 第二步：创建路由器
    const router = createRouter({
        history: createWebHistory(),    // 路由器的工作模式
        // 定义一个个的路由规则
        routes: [
            {
                path: '/home',
                component: Home
            },
            {
                path: '/news',
                component: News
            },
            {
                path: '/about',
                component: About
            },
        ]
    })
    
    // 第三步：暴露出去router 导出路由
    export default router
    ```

- `main.ts`代码如下：

    ```ts
    // 引入路由器
    import router from './router/index'
    
    // 创建一个应用
    const app = createApp(App)
    // 使用路由器
    app.use(router)
    // 挂载整个应用到app容器
    app.mount('#app')
    ```

-   `App.vue`代码如下

    ```vue
    <template>
      <div class="app">
        <h2 class="title">Vue3路由测试</h2>
        <!-- 导航区 -->
        <div class="navigate">
          <RouterLink to="/home" active-class="active">首页</RouterLink>
          <RouterLink to="/news" active-class="active">新闻</RouterLink>
          <RouterLink to="/about" active-class="active">关于</RouterLink>
        </div>
        <!-- 展示区 -->
        <div class="main-content">
          <!-- 告知router将命中的component放在这里-->
          <RouterView></RouterView>
        </div>
    
      </div>
    </template>
    
    <script lang="ts" setup name="App">
    import {RouterView, RouterLink} from "vue-router";
    
    </script>
    ```



## 4.3  两个注意点

-   在工程化中，路由组件通常存放在`pages` 或 `views`文件夹，一般组件通常存放在`components`文件夹

-   通过点击导航，视觉效果上“消失” 了的路由组件，默认是被**卸载**掉的，需要的时候再去**挂载**



##  4.4 路由器工作模式

1.  `history`模式

    Vu2：`mode: 'history'`

    Vue2：`history:createWebHistory()`

    React：`<BrowserRouter>`

    >   优点：`URL`更加美观，不带有`#`，更接近传统的网站`URL`。
    >
    >   缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有`404`错误。
    >
    >   ```js
    >   const router = createRouter({
    >   	history:createWebHistory(), //history模式
    >   	/******/
    >   })
    >   ```

2.  `hash`模式

    >   优点：兼容性更好，因为不需要服务器端处理路径。
    >
    >   缺点：`URL`带有`#`不太美观，且在`SEO`优化方面相对较差。
    >
    >   ```js
    >   const router = createRouter({
    >   	history:createWebHashHistory(), //hash模式
    >   	/******/
    >   })
    >   ```

基本的使用方法：

-   在一些后台管理系统中，若想要稳定，一般是会用hash模式
-   在一些给客户用的系统，比如 b站 等，一般是用的history模式
    

## 4.5 to的两种写法

```vue
<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>

<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">主页</router-link>
```

## 4.6.命名路由

作用：可以简化路由跳转及传参

给路由规则命名：

```ts
routes: [
    {
        // 建议是name是组件名小写，但是为了理清关系，先用拼音写
        name: 'zhuye',  
        path: '/home',
        component: Home
    },
    {
        name: 'xinwen',
        path: '/news',
        component: News
    },
    {
        name: 'guanyu',
        path: '/about',
        component: About
    },
]
```

跳转路由：

```vue
<!--简化前：需要写完整的路径（to的字符串写法） -->
<router-link to="/news/detail">跳转</router-link>

<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'guanyu'}">跳转</router-link>
```



## 4.7 嵌套路由

1.  编写`News`的子路由：`Detail.vue`

2.  配置路由规则，使用`children`配置项：

    ```ts
    const router = createRouter({
        history: createWebHistory(),   
        routes: [
            {
                // 建议是name是组件名小写，但是为了理清关系，先用拼音写
                name: 'zhuye',
                path: '/home',
                component: Home
            },
            {
                name: 'xinwen',
                path: '/news',
                component: News,
                children: [
                    {
                        name: 'xiang',
                        path: 'detail',
                        component: Detail
                    }
                ]
            },
            {
                name: 'guanyu',
                path: '/about',
                component: About
            },
        ]
    })
    
    export default router
    ```

3.  跳转路由（记得要加完整路径）：

    ```vue
    <router-link to="/news/detail">xxxx</router-link>
    <!-- 或 -->
    <router-link :to="{path:'/news/detail'}">xxxx</router-link>
    ```

4.  记得去`News`组件中预留一个`<router-view>`

    ```vue
    <template>
      <div class="news">
        <nav class="news-list">
          <RouterLink v-for="news in newsList" :key="news.id" :to="{path:'/news/detail'}">
            {{news.name}}
          </RouterLink>
        </nav>
        <div class="news-detail">
          <!-- 告知router将命中的component放在这里-->
          <RouterView/>
        </div>
      </div>
    </template>
    ```

    ​	

## 4.8 路由传参

### query参数

1.  传递参数

    ```vue
    <!-- 第一种写法：跳转并携带query参数（to的字符串写法） -->
    <router-link to="/news/detail?a=1&b=2&content=欢迎你">
        跳转
    </router-link>
    
    <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">
        {{ news.title }}
    </RouterLink>
    
    
    <!-- 第二种写法：跳转并携带query参数（to的对象写法） -->
    <RouterLink 
                :to="{
                     //name:'xiang', //用name也可以跳转
                     path:'/news/detail',
                     query:{
                     id:news.id,
                     title:news.title,
                     content:news.content
                     }
                     }"
                >
        {{news.title}}
    </RouterLink>
    ```

2.  接收参数：

    ```js
    import {useRoute} from 'vue-router'
    const route = useRoute()
    // 打印query参数
    console.log(route.query)
    ```

### params参数

1.  传递参数

    ```vue
    <!-- 第一种写法：跳转并携带params参数（to的字符串写法） -->
    <RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
    
    <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink>
    
    
    <!-- 第二种写法：跳转并携带params参数（to的对象写法） -->
    <RouterLink 
                :to="{
                     name:'xiang', //只能用name跳转
                     params:{
                     id:news.id,
                     title:news.title,
                     content:news.title
                     }
                     }"
                >
        {{news.title}}
    </RouterLink>
    ```

2.  接收参数：

    ```js
    import {useRoute} from 'vue-router'
    const route = useRoute()
    // 打印params参数
    console.log(route.params)
    ```

注意：

​	需要在路由规则中进行参数占位

```ts
{
    name: 'xiang',
    path: 'detail/:id/:title/:content',
    component: Detail
}
```

>   备注1：传递`params`参数时，若使用`to`的对象写法，必须使用`name`配置项，不能用`path`。
>
>   备注2：传递`params`参数时，需要提前在规则中占位。
>
>   备注3：`params`参数，不能传对象、数组

## 4.9 路由的props配置

路由规则的props

作用：让路由组件更方便的收到参数（可以将路由参数作为`props`传给组件）

```js
{
	name:'xiang',
	path:'detail/:id/:title/:content',
	component:Detail,

  	// 第一种写法：props的布尔值写法：将路由收到的所有params参数作为props传给路由组件
    // props: true
        
    // 第二种写法：props的函数写法，可以自己决定将什么作为props传给路由组件
    // 这种写法也可以也可以传入 params参数，但是没必要，直接使用 props: true 即可
    // props(route) {
    //     return route.query
    // }

    // 第三种写法：props的对象写法，可以自己决定将什么作为props传给路由组件
    props: {
        a: 100,
        b: 200,
        c: 300
    }
}
```

第一种方式的路由 与 接受参数的形式

路由：

```ts
{
	name: 'xiang',
    path: 'detail/:id/:title/:content',
    component: Detail,
    // 第一种写法：props的布尔值写法：将路由收到的所有params参数作为props传给路由组件
    props: true

}
```

接受参数：

```ts
// 第一种写法的参数接受
defineProps(['id', 'title', 'content'])
```

第二种方式的路由 与 接受参数的形式

路由：

```ts
{
    name: 'xiang',
    path: 'detail',
    component: Detail,
    // 第二种写法：props的函数写法，可以自己决定将什么作为props传给路由组件
    // 这种写法也可以也可以传入 params参数，但是没必要，直接使用 props: true 即可
    props(route) {
		return route.query
    }
}
```

```vue
<RouterLink :to="{
                 name:'xiang',
                 query:{
                 id:news.id,
                 title:news.title,
                 content:news.title
                 }
                 }">
    {{ news.title }}
</RouterLink>
```

接受参数：

```ts
defineProps(['id', 'title', 'content'])
```

第三种方式的路由 与 接受参数 的形式

路由：

```ts
{
    name: 'xiang',
    path: 'detail',
    component: Detail,
    // 第三种写法：props的对象写法，可以自己决定将什么作为props传给路由组件
    props: {
        a: 100,
        b: 200,
        c: 300
    }
}
```

接受参数：

```ts
defineProps(['a', 'b', 'c'])
```

## 4.10  replace属性

1.  作用：控制路由跳转时操作浏览器历史记录的模式。

2.  浏览器的历史记录有两种写入方式：分别为```push```和```replace```：

    -   ```push```是追加历史记录（默认值）。
    -   `replace`是替换当前记录。
        -   希望路由以后，无法退回就使用这种

3.  开启`replace`模式：

    ```vue
    <RouterLink replace .......>News</RouterLink>
    ```

## 4.11 编程式导航

编程式导航说人话就是，脱离`<RouterLink/>`标签（声明式导航）实现路由的跳转

路由组件的两个重要的属性：`$route`和`$router`变成了两个`hooks`

注意：在vue2中编程式导航重复跳转会报错，vue3不会

```js
import {useRoute,useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()

console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)
```



### useRoute：路由数据

userRoute作用：路由传参跳转到指定页面后，页面需要取到传递过来的值，可以使用 `useRoute`方法；

拿到当前页路由数据；可以做

1.  获取到当前路径
2.  获取到组件名
3.  获取到参数
4.  获取到查询字符串

### useRouter：路由器

userRouter作用：拿到路由器；可以控制跳转、回退等

```vue
<script setup lang="ts" name="Home">
import {useRouter} from 'vue-router';
import {onMounted} from "vue";

const router = useRouter();

// 使用勾子实现在首页3s后跳转到新闻页
onMounted(() => {
  console.log('3s后即将跳转到新闻页')
  setTimeout(() => {
    // router即路由器，push、replace都可以实现页面跳转
    router.push('/news')  // 里面的参数与 <RouterLink/>的to属性传入的参数一致
  }, 3000)
})
</script>
```

```vue
<script setup lang="ts">
    
const router = useRouter();

interface newsInter {
  id: string,
  title: string,
  content: string
}

// 实现点击按钮查看新闻详情
function showNewsDetail(news: newsInter) {
  router.push({
    name: 'xiang',
    query: {
      id: news.id,
      title: news.title,
      content: news.content
    }
  })
}
</script>
```

## 4.12 重定向

1.  作用：将特定的路径，重新定向到已有路由。

2.  具体编码：

    ```js
    {
        path:'/',
        redirect:'/about'
    }
    ```



# 5. pinia（集中式状态管理） 

集中式状态管理：

-   React：redux、mobx

-   Vue：vuex、pinia

## 5.1 准备一个效果

<img src="./assets/pinia_example.gif" alt="pinia_example" style="zoom:30%;border:3px solid" /> 

## 5.2 搭建 pinia 环境

第一步：`npm install pinia`

第二步：操作`src/main.ts`

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

/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'

const app = createApp(App)
/* 创建pinia */
const pinia = createPinia()

/* 使用插件 */
app.use(pinia)
app.mount('#app')
```

此时开发者工具中已经有了`pinia`选项

<img src="https://cdn.nlark.com/yuque/0/2023/png/35780599/1684309952481-c67f67f9-d1a3-4d69-8bd6-2b381e003f31.png" style="zoom:80%;border:1px solid black;border-radius:10px" />

## 5.3 存储+读取数据

1.  `Store`是一个保存：**状态**、**业务逻辑** 的实体，每个组件都可以**读取**、**写入**它。

2.  它有三个概念：`state`、`getter`、`action`，相当于组件中的： `data`、 `computed` 和 `methods`。

    1.  大多数时候，state 是 store 的核心部分
    2.  Getter 完全等同于 Store 状态的 [计算值](https://v3.vuejs.org/guide/reactivity-computed-watchers.html#computed-values)
    3.  Actions 相当于组件中的 [methods](https://v3.vuejs.org/guide/data-methods.html#methods)。
        1.  **actions 可以是异步的**，您可以在其中`await` 任何 API 调用甚至其他操作！

3.  具体编码：`src/store/count.ts`

    ```ts
    // 引入defineStore用于创建store
    import {defineStore} from 'pinia'
    
    // 定义并暴露一个store
    export const useCountStore = defineStore('count',{
      // 动作
      actions:{},
      // 状态
      state(){
        return {
          sum:6
        }
      },
      // 计算
      getters:{}
    })
    ```

4.  具体编码：`src/store/talk.ts`

    ```js
    // 引入defineStore用于创建store
    import {defineStore} from 'pinia'
    
    // 定义并暴露一个store
    export const useTalkStore = defineStore('talk',{
      // 动作
      actions:{},
      // 状态：真正存储数据的地方
      state(){
        return {
          talkList:[
            {id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},
         		{id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},
            {id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}
          ]
        }
      },
      // 计算
      getters:{}
    })
    ```

5.  组件中使用`state`中的数据

    ```vue
    <template>
      <h2>当前求和为：{{ sumStore.sum }}</h2>
      <!-- countStore.$state.sum也能拿到数据，但是显然上面一种更方便 -->
    </template>
    
    <script setup lang="ts" name="Count">
      // 1.引入对应的useXxxxxStore	
      import {useSumStore} from '@/store/sum'
      
      // 2.调用useXxxxxStore得到对应的store
      const sumStore = useSumStore()
    </script>
    ```

    ```vue
    <template>
    	<ul>
        <li v-for="talk in talkStore.talkList" :key="talk.id">
          {{ talk.content }}
        </li>
      </ul>
    </template>
    
    <script setup lang="ts" name="Count">
      import axios from 'axios'
      import {useTalkStore} from '@/store/talk'
    
      const talkStore = useTalkStore()
    </script>
    ```

    

## 5.4 修改数据(三种方式)

第一种修改方式，直接修改

```ts
countStore.sum += 666
// 或
countStore.$state.sum += n.value
```

第二种修改方式：**$patch**方法，且这种方式可以进行**批量修改**

```ts
countStore.$patch({
  sum:999,
  school:'atguigu'
})
```

第三种修改方式：

​	借助`action`修改（说明：`action`中可以编写一些业务逻辑）

```js
import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
  /*************/
  actions: {
    //加
    increment(value:number) {
      if (this.sum < 10) {
        //操作countStore中的sum
        this.sum += value
      }
    },
    //减
    decrement(value:number){
      if(this.sum > 1){
        this.sum -= value
      }
    }
  },
  /*************/
})
```

组件中调用`action`即可

```js
// 使用countStore
const countStore = useCountStore()

// 调用对应action
countStore.increment(n.value)
```

## 5.5 storeToRefs

-   借助`storeToRefs`将`store`中的数据转为`ref`对象，方便在模板中使用
    -   区别：pina中`storeToRefs`只关注数据，vue中的`toRefs`会将数据、方法都进行ref包裹
-   注意：`pinia`提供的`storeToRefs`只会将数据做转换，而`Vue`的`toRefs`会转换`store`中数据。

```vue
<template>
	<div class="count">
		<h2>当前求和为：{{sum}}</h2>
	</div>
</template>

<script setup lang="ts" name="Count">
  import { useCountStore } from '@/store/count'
  /* 引入storeToRefs */
  import { storeToRefs } from 'pinia'

	/* 得到countStore */
  const countStore = useCountStore()
  /* 使用storeToRefs转换countStore，随后解构 */
  const {sum} = storeToRefs(countStore)
</script>

```

## 5.6 getters

1.  概念：当`state`中的数据，需要经过处理后再使用时，可以使用`getters`配置。

2.  追加```getters```配置。

    ```js
    // 引入defineStore用于创建store
    import {defineStore} from 'pinia'
    
    // 定义并暴露一个store
    export const useCountStore = defineStore('count',{
      // 动作：actions里面放置的是一个个的方法，用于响应组件中的动作
      actions:{
        /************/
      },
      // 状态：真正存储数据的地方
      state(){
        return {
          sum:1,
          school:'atguigu'
        }
      },
      // 计算，相当于store中的计算属性
      getters:{
        bigSum:(state):number => state.sum *10,
        upperSchool():string{
          return this. school.toUpperCase()
        }
      }
    })
    ```

3.  组件中读取数据：

    ```js
    const {increment,decrement} = countStore
    
    let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)
    ```



## 5.7 $subscribe（订阅状态）

可以通过 store 的 `$subscribe()` 方法查看状态及其变化，类似于 Vuex 的 [subscribe 方法](https://vuex.vuejs.org/api/#subscribe)。 与常规的 `watch()` 相比，使用 `$subscribe()` 的优点是 *subscriptions* 只会在 *patches* 之后触发一次

```js
talkStore.$subscribe((mutate,state)=>{
  console.log('LoveTalk',mutate,state)
  localStorage.setItem('talk',JSON.stringify(talkList.value))
})
```



## 5.8 store组合式写法

```ts
import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'

export const useTalkStore = defineStore('talk',()=>{
  // talkList就是state
  const talkList = reactive(
    JSON.parse(localStorage.getItem('talkList') as string) || []
  )

  // getATalk函数相当于action
  async function getATalk(){
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    let {data:{content:content}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串，包装成一个对象
    let obj = {id:nanoid(),content}
    // 放到数组中
    talkList.unshift(obj)
  }
  return {talkList,getATalk}
})
```



# 6. 组件通信

**`Vue3`组件通信和`Vue2`的区别：**

-   移出事件总线，使用`mitt`代替。

-   `vuex`换成了`pinia`。
-   把`.sync`优化到了`v-model`里面了。
-   把`$listeners`所有的东西，合并到`$attrs`中了。
-   `$children`被砍掉了。

**常见搭配形式：**

<img src="assets/image-20231119185900990.png" alt="image-20231119185900990" style="zoom:60%;" /> 

## 6.1 props

概述：`props`是使用频率最高的一种通信方式，常用与 ：**父 ↔ 子**。

-   若 **父传子**：属性值是**非函数**。
    -   在父组件中给子组件绑定属性，子组件内部通过props选型接收数据
-   若 **子传父**：属性值是**函数**。
    -   父先提供一个函数给子，子调用函数传数据给父

>   说明：
>
>   ​	如果需要父传给孙，孙传给父，不建议使用props

父组件：

```vue
<template>
  <div class="father">
    <h3>父组件，</h3>
		<h4>我的车：{{ car }}</h4>
		<h4>儿子给的玩具：{{ toy }}</h4>
		<Child :car="car" :sentToy="getToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import { ref } from "vue";
	// 数据
	const car = ref('奔驰')
	const toy = ref()
	// 方法
	function getToy(value:string){
		toy.value = value
	}
</script>
```

子组件

```vue
<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>我的玩具：{{ toy }}</h4>
		<h4>父给我的车：{{ car }}</h4>
		<button @click="sendToy(toy)">玩具给父亲</button>
  </div>
</template>

<script setup lang="ts" name="Child">
	import { ref } from "vue";
	const toy = ref('奥特曼')
	
	defineProps(['car','sendToy'])
</script>
```

## 6.2 $emit 自定义事件

1.  概述：自定义事件常用于：**子 => 父。**（实现的基本思路：在父组件中自定义事件，在子组件中声明事件）
2.  注意区分好：原生事件、自定义事件。

-   原生事件：
    -   事件名是特定的（`click`、`mosueenter`等等）	
    -   事件对象`$event`: 是包含事件相关信息的对象（`pageX`、`pageY`、`target`、`keyCode`）
-   自定义事件： 
    -   事件名是任意名称
    -   <strong style="color:red">事件对象`$event`: 是调用`emit`时所提供的数据，可以是任意类型！！！</strong >

3.  示例：

    ```html
    <!--在父组件中，给子组件绑定自定义事件：-->
    <Child @send-toy="toy = $event"/>
    
    <!--注意区分原生事件与自定义事件中的$event-->
    <button @click="toy = $event">测试</button>
    ```

    ```js
    //子组件中，触发事件：
    this.$emit('send-toy', 具体数据)
    ```



## 6.3 mitt 全局事件总线

概述：与消息订阅与发布（`pubsub`）功能类似，可以**实现任意组件间通信**。

>   说人话：
>
>   发数据：必然 **触发**事件（发布），类似于MQ的发送消息
>
>   收数据：必然 **绑定**事件	（订阅），类似于MQ的监听消息

安装`mitt`

```shell
npm i mitt
```

新建文件：`src\utils\emitter.ts`

```javascript
// 引入mitt 
import mitt from "mitt";

// 创建emitter
const emitter = mitt()

/*
  // 绑定事件
  emitter.on('abc',(value)=>{
    console.log('abc事件被触发',value)
  })
  emitter.on('xyz',(value)=>{
    console.log('xyz事件被触发',value)
  })

  setInterval(() => {
    // 触发事件
    emitter.emit('abc',666)
    emitter.emit('xyz',777)
  }, 1000);

  setTimeout(() => {
    // 清理事件
    // emitter.off('abc')
    // emitter.off('xyz')
    emitter.all.clear()
  }, 3000); 
*/

// 创建并暴露mitt
export default emitter
```

接收数据的组件中：**绑定事件、同时在销毁前解绑事件**

```typescript
import emitter from "@/utils/emitter";
import { onUnmounted } from "vue";

// 绑定事件
emitter.on('send-toy',(value)=>{
  console.log('send-toy事件被触发',value)
})

onUnmounted(()=>{
  // 解绑事件
  emitter.off('send-toy')
})
```

【第三步】：提供数据的组件，在合适的时候**触发事件**

```javascript
import emitter from "@/utils/emitter";

function sendToy(){
  // 触发事件
  emitter.emit('send-toy',toy.value)
}
```

**注意这个重要的内置关系，总线依赖着这个内置关系**



## 6.4 v-model（很少自己手写）

1.  概述：实现 **父↔子** 之间相互通信。

2.  前序知识 —— `v-model`的本质

    ```vue
    <!-- 使用v-model指令 -->
    <input type="text" v-model="userName">
    
    <!-- v-model的本质是下面这行代码 -->
    <!--
    	:value="username"                       实现 数据 => 页面
    	@input="username = $event.target.value" 实现 页面 => 数据
    	v-model本质就是 动态value + input事件
    -->
    <input 
      type="text" 
      :value="userName" 
      @input="userName =(<HTMLInputElement>$event.target).value"
    >
    ```

3.  组件标签上的`v-model`的本质：`:moldeValue` ＋ `update:modelValue`事件。

    

    ```vue
    <!-- 组件标签上使用v-model指令 -->
    <AtguiguInput v-model="userName"/>
    
    <!-- 组件标签上v-model的本质 -->
    <AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>
    ```

    `AtguiguInput`组件中：

    ```vue
    <template>
      <div class="box">
        <!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 -->
    		<!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件-->
        <input 
           type="text" 
           :value="modelValue" 
           @input="emit('update:model-value',$event.target.value)"
        >
      </div>
    </template>
    
    <script setup lang="ts" name="AtguiguInput">
      // 接收props
      defineProps(['modelValue'])
      // 声明事件
      const emit = defineEmits(['update:model-value'])
    </script>
    ```

4.  也可以更换`value`，例如改成`abc`

    ```vue
    <!-- 也可以更换value，例如改成abc-->
    <AtguiguInput v-model:abc="userName"/>
    
    <!-- 上面代码的本质如下 -->
    <AtguiguInput :abc="userName" @update:abc="userName = $event"/>
    ```

    `AtguiguInput`组件中：

    ```vue
    <template>
      <div class="box">
        <input 
           type="text" 
           :value="abc" 
           @input="emit('update:abc',$event.target.value)"
        >
      </div>
    </template>
    
    <script setup lang="ts" name="AtguiguInput">
      // 接收props
      defineProps(['abc'])
      // 声明事件
      const emit = defineEmits(['update:abc'])
    </script>
    ```

5.  如果`value`可以更换，那么就可以在组件标签上多次使用`v-model`

    ```vue
    <AtguiguInput v-model:abc="userName" v-model:xyz="password"/>
    ```

    

## 6.5 $attrs（`useAttrs`）

1.  概述：`$attrs`用于实现**当前组件的父组件**，向**当前组件的子组件**通信（**祖→孙**）（也能实现**孙→祖** ）

2.  具体说明：`$attrs`是一个对象，包含所有父组件传入的标签属性。

    >   注意：`$attrs`会自动排除`props`中声明的属性(可以认为声明过的 `props` 被子组件自己“消费”了)

$attrs === useAttrs，一个是在setup中使用，一个是在template中使用，但是useAttrs比vue2中组件实例的​\$attrs更强大了，可以接收到事件

父组件：

```vue
<template>
  <div class="father">
    <h3>父组件</h3>
     <!-- 解释：
        v-bind="{x:100,y:200} ==> :x="100" :y="200"
     -->
	 <Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import { ref } from "vue";
	let a = ref(1)
	let b = ref(2)
	let c = ref(3)
	let d = ref(4)

	function updateA(value){
		a.value = value
	}
</script>
```

子组件：

```vue
<template>
	<div class="child">
		<h3>子组件</h3>
        <!-- v-bind="$attrs" 意思是将父组件给的数据，且自己没有接收的数据，传递给孙组件 -->
		<!-- <GrandChild v-bind="$attrs"/> -->
        <GrandChild :="$attrs"/>
	</div>
</template>

<script setup lang="ts" name="Child">
	import GrandChild from './GrandChild.vue'
   	// 父组件Father给子组件Child传递的数据（a、b、c、d、x、y）
  	// 子组件未使用defineProps接收的数据将放入到 attrs 中
</script>
```

孙组件：

```vue
<template>
	<div class="grand-child">
		<h3>孙组件</h3>
		<h4>a：{{ a }}</h4>
		<h4>b：{{ b }}</h4>
		<h4>c：{{ c }}</h4>
		<h4>d：{{ d }}</h4>
		<h4>x：{{ x }}</h4>
		<h4>y：{{ y }}</h4>
		<button @click="updateA(666)">点我更新A</button>
	</div>
</template>

<script setup lang="ts" name="GrandChild">
	defineProps(['a','b','c','d','x','y','updateA'])
</script>
```

## 6.6 \$refs、$parent

1.  概述：

    -   `$refs`用于 ：**父→子。**
    -   `$parent`用于：**子→父。**

2.  原理如下：

    | 属性      | 说明                                                     |
    | --------- | -------------------------------------------------------- |
    | `$refs`   | 值为对象，包含所有被`ref`属性标识的`DOM`元素或组件实例。 |
    | `$parent` | 值为对象，当前组件的父组件实例对象。                     |

```vue
<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>房产：{{ house }}</h4>
    <button @click="changeToy">修改Child1的玩具</button>
    <button @click="changeComputer">修改Child2的电脑</button>
    <button @click="getAllChild($refs)">让所有孩子的书变多</button>
    <!-- ref标签用于组件标签上：获取组件实例 -->
    <Child1 ref="c1" />
    <Child2 ref="c2" />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
import { ref, reactive } from "vue";

let c1 = ref();
let c2 = ref();

// 数据
let house = ref(4);
// 方法
function changeToy() {
  // console.log(c1.value);
  c1.value.toy = "小猪佩奇";
}
function changeComputer() {
  c2.value.computer = "华为";
}

function getAllChild(refs: { [key: string]: any }) {
  console.log(refs);
  for (let key in refs) {
    refs[key].book += 3;
  }
}
// 向外部提供数据
defineExpose({ house });
</script>
```

子组件

```vue
<template>
  <div class="child1">
    <h3>子组件1</h3>
    <h4>玩具：{{ toy }}</h4>
    <h4>书籍：{{ book }} 本</h4>
    <button @click="minusHouse($parent)">干掉父亲的一套房产</button>
  </div>
</template>

<script setup lang="ts" name="Child1">
import { ref } from "vue";

// 数据
let toy = ref("奥特曼");
let book = ref(3);

// 方法
function minusHouse(parent: any) {
  parent.house -= 1;
}

// 把数据交给外部（允许外部组件访问）
defineExpose({ toy, book });
</script>
```

子组件

```vue
<template>
  <div class="child2">
    <h3>子组件2</h3>
    <h4>电脑：{{ computer }}</h4>
    <h4>书籍：{{ book }} 本</h4>
  </div>
</template>

<script setup lang="ts" name="Child2">
import { ref } from "vue";

// 数据
let computer = ref("联想");
let book = ref(6);

// 把数据交给外部
defineExpose({ computer, book });
</script>
```



## 6.7 provide、inject（无侵入中间组件）

1.  概述：实现**祖孙组件**直接通信

    1.  与 \$attrs的区别：\$attrs需要打扰以下中间的父组件，而provide、inject 不需要

2.  具体使用：

    -   在祖先组件中通过`provide`配置向后代组件提供数据
    -   在后代组件中通过`inject`配置来声明接收数据

3.  具体编码：

    【第一步】父组件中，使用`provide`提供数据

    ```vue
    <template>
      <div class="father">
        <h3>父组件</h3>
        <h4>资产：{{ money }}</h4>
        <h4>汽车：{{ car }}</h4>
        <button @click="money += 1">资产+1</button>
        <button @click="car.price += 1">汽车价格+1</button>
        <Child/>
      </div>
    </template>
    
    <script setup lang="ts" name="Father">
      import Child from './Child.vue'
      import { ref,reactive,provide } from "vue";
      // 数据
      let money = ref(100)
      let car = reactive({
        brand:'奔驰',
        price:100
      })
      // 用于更新money的方法
      function updateMoney(value:number){
        money.value += value
      }
      // 向后代（包括子、孙、孙孙组件）提供数据
      provide('moneyContext',{money,updateMoney})	// 注意：传的是ref，money不`.value`
      provide('car',car)
    </script>
    ```

    >   注意：子组件中不用编写任何东西，是不受到任何打扰的

    【第二步】孙组件中使用`inject`配置项接受数据。

    ```vue
    <template>
      <div class="grand-child">
        <h3>我是孙组件</h3>
        <h4>资产：{{ money }}</h4>
        <h4>汽车：{{ car }}</h4>
        <button @click="updateMoney(6)">点我</button>
      </div>
    </template>
    
    <script setup lang="ts" name="GrandChild">
    import { inject } from 'vue';
     
     // 接收祖辈传递的数据
     /**
     * inject
     *  参数一：变量key
     *  参数二：默认值defaultValue
     */
    let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})
    let car = inject('car')
    </script>
    ```

## 6.8 pinia

参考之前`pinia`部分的讲解

## 6.9 slot

### 1. 默认插槽

![img](./assets/default_slot.png)

```vue
父组件中：
        <Category title="今日热门游戏">
          <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
          </ul>
        </Category>
子组件中：
        <template>
          <div class="item">
            <h3>{{ title }}</h3>
            <!-- 默认插槽 -->
            <slot>默认插槽这里可以写默认内容，如果组件有传内容过来就会覆盖</slot>
          </div>
        </template>
```

小结：

-   默认插槽的名字 `name="default"`，但是一般都不会怎么写

### 2. 具名插槽

```vue
父组件中：
        <Category title="今日热门游戏">
          <template v-slot:s1>
            <ul>
              <li v-for="g in games" :key="g.id">{{ g.name }}</li>
            </ul>
          </template>
          <template #s2>
            <a href="">更多</a>
          </template>
        </Category>
子组件中：
        <template>
          <div class="item">
            <h3>{{ title }}</h3>
            <slot name="s1"></slot>
            <slot name="s2"></slot>
          </div>
        </template>
```

小结：

-   `v-slot`只能放置在组件标签或`template`标签
-   语法糖：`v-slot:`可以简写为 `#`，例如  v-slot:s1 可简写为 #s1

### 3. 作用域插槽 

-   理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（新闻数据在`News`组件中，但使用数据所遍历出来的结构由`App`组件决定）
    -   数据在组件的自身，这句话中的数据也可以是父组件通过props给子组件的
    -   生活中：压岁钱（数据）在孩子手中，但是根据压岁钱买什么东西，得由爸爸决定（父决定结构）

具体编码：

```vue
父组件中：
      <Game v-slot="params">
      <!-- <Game v-slot:default="params"> -->
      <!-- <Game #default="params"> -->
        <ul>
          <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
        </ul>
      </Game>

子组件中：
      <template>
        <div class="category">
          <h2>今日游戏榜单</h2>
          <slot :games="games" a="哈哈"></slot>
        </div>
      </template>

      <script setup lang="ts" name="Category">
        import {reactive} from 'vue'
        let games = reactive([
          {id:'asgdytsa01',name:'英雄联盟'},
          {id:'asgdytsa02',name:'王者荣耀'},
          {id:'asgdytsa03',name:'红色警戒'},
          {id:'asgdytsa04',name:'斗罗大陆'}
        ])
      </script>
```

说明：

​	`:games="games" `意思是将games变量中的数据传给slot插槽的使用者

​	`v-slot="params" `意思是插槽的使用这接收插槽传递的所有参数，其中就包括了 games

​	

# 7. 其它 API

## 7.1.【shallowRef 与 shallowReactive 】

### `shallowRef`

1.  作用：创建一个响应式数据，但**只对顶层属性进行响应式处理**。

2.  用法：

    ```js
    let myVar = shallowRef(initialValue);
    ```

3.  特点：**只跟踪引用值的变化**，不关心值内部的属性变化。

### `shallowReactive`

1.  作用：创建一个浅层响应式对象，**只会使对象的最顶层属性变成响应式**的，对象内部的嵌套属性则不会变成响应式的

2.  用法：

    ```js
    const myObj = shallowReactive({ ... });
    ```

3.  特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。

### 总结

>   通过使用 [`shallowRef()`](https://cn.vuejs.org/api/reactivity-advanced.html#shallowref) 和 [`shallowReactive()`](https://cn.vuejs.org/api/reactivity-advanced.html#shallowreactive) 来绕开深度响应。浅层式 `API` 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。



## 7.2.【readonly 与 shallowReadonly】

### **`readonly`**

1.  作用：用于创建一个对象的**深只读副本**。

2.  用法：

    ```js
    const original = reactive({ ... });
    const readOnlyCopy = readonly(original);
    ```

3.  特点：

    -   对象的所有嵌套属性都将变为只读。
    -   任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。

4.  应用场景：

    -   创建不可变的状态快照。
    -   保护全局状态或配置不被修改。

### **`shallowReadonly`**

1.  作用：与 `readonly` 类似，但**只作用于对象的顶层属性**（浅层只读，深层可改变）。

2.  用法：

    ```js
    const original = reactive({ ... });
    const shallowReadOnlyCopy = shallowReadonly(original);
    ```

3.  特点：

    -   只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。

    -   适用于只需保护对象顶层属性的场景。

        

## 7.3.【toRaw 与 markRaw】

### `toRaw`

1.  作用：用于获取一个响应式对象的原始对象， `toRaw` 返回的对象不再是响应式的，不会触发视图更新。

    >   官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。

    >   何时使用？ —— 在需要将响应式对象传递给非 `Vue` 的库或外部系统时，使用 `toRaw` 可以确保它们收到的是普通对象

2.  具体编码：

    ```js
    import { reactive,toRaw,markRaw,isReactive } from "vue";
    
    /* toRaw */
    // 响应式对象
    let person = reactive({name:'tony',age:18})
    // 原始对象
    let rawPerson = toRaw(person)
    
    
    /* markRaw */
    let citys = markRaw([
      {id:'asdda01',name:'北京'},
      {id:'asdda02',name:'上海'},
      {id:'asdda03',name:'天津'},
      {id:'asdda04',name:'重庆'}
    ])
    // 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了
    let citys2 = reactive(citys)
    console.log(isReactive(person))
    console.log(isReactive(rawPerson))
    console.log(isReactive(citys))
    console.log(isReactive(citys2))
    ```

### `markRaw`

1.  作用：标记一个对象，使其**永远不会**变成响应式的。

    >   例如使用`mockjs`时，为了防止误把`mockjs`变为响应式对象，可以使用 `markRaw` 去标记`mockjs`

2.  编码：

    ```js
    /* markRaw */
    let citys = markRaw([
      {id:'asdda01',name:'北京'},
      {id:'asdda02',name:'上海'},
      {id:'asdda03',name:'天津'},
      {id:'asdda04',name:'重庆'}
    ])
    // 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了
    let citys2 = reactive(citys)
    ```

## 7.4.【customRef】

作用：创建一个自定义的`ref`，并对其依赖项跟踪和更新触发进行逻辑控制。

实现防抖效果（`useSumRef.ts`）：

```typescript
import { customRef } from "vue";

export default function(initValue:string,delay:number){
  let msg = customRef((track,trigger)=>{
    let timer:number
    return {
      get(){
        track() // 告诉Vue数据msg很重要，要对msg持续关注，一旦变化就更新
        return initValue
      },
      set(value){
        clearTimeout(timer)
        timer = setTimeout(() => {
          initValue = value
          trigger() //通知Vue数据msg变化了
        }, delay);
      }
    }
  }) 
  return {msg}
}
```

组件中使用：

```vue
<template>
  <div class="app">
    <h2>{{ msg }}</h2>
    <input type="text" v-model="msg" />
  </div>
</template>

<script setup lang="ts" name="App">
import { ref } from "vue";
import useMsgRef from "./useMsgRef";

// 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
// let msg = ref('你好')

// 使用useMsgRef来定义一个响应式数据且有延迟效果
let { msg } = useMsgRef("你好", 2000);
</script>
```



# 8. Vue3新组件

## 8.1. 【Teleport】

-   什么是Teleport？—— Teleport 是一种能够将我们的**组件html结构**移动到指定位置的技术。

```html
<teleport to='body' >
    <div class="modal" v-show="isShow">
      <h2>我是一个弹窗</h2>
      <p>我是弹窗中的一些内容</p>
      <button @click="isShow = false">关闭弹窗</button>
    </div>
</teleport>
```

## 8.2. 【Suspense】

-   等待异步组件时渲染一些额外内容，让应用有更好的用户体验 
-   使用步骤： 
    -   异步引入组件
    -   使用`Suspense`包裹组件，并配置好`default` 与 `fallback`

```tsx
import { defineAsyncComponent,Suspense } from "vue";
const Child = defineAsyncComponent(()=>import('./Child.vue'))
```

```vue
<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
          <template v-slot:default>
            <Child/>
          </template>
          <template v-slot:fallback>
            <h3>加载中.......</h3>
          </template>
        </Suspense>
    </div>
</template>
```



## 8.3.【全局API转移到应用对象】

-   `app.component`
-   `app.config`
-   `app.directive`
-   `app.mount`
-   `app.unmount`
-   `app.use`

## 8.4.【其他】

-   过渡类名 `v-enter` 修改为 `v-enter-from`、过渡类名 `v-leave` 修改为 `v-leave-from`。

-   `keyCode` 作为 `v-on` 修饰符的支持。

-   `v-model` 指令在组件上的使用已经被重新设计，替换掉了 `v-bind.sync。`

-   `v-if` 和 `v-for` 在同一个元素身上使用时的优先级发生了变化。

-   移除了`$on`、`$off` 和 `$once` 实例方法。

-   移除了过滤器 `filter`。

-   移除了`$children` 实例 `propert`。

    ......