Vue3从入门到实战：深度了解相关API

深藏阁楼爱情的钟 2024-04-26 01:52 84阅读 0赞

**`shallowRef`**

> 1.  **作用：创建一个响应式数据，但只对顶层属性进行响应式处理。**
> 2.  **用法：**
>     
>         let myVar = shallowRef(initialValue);
> 3.  **特点：只跟踪引用值的变化，不关心值内部的属性变化。**

**`shallowReactive`**

> 1.  **作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的**
> 2.  **用法：**
>     
>         const myObj = shallowReactive({ ... });
> 3.  **特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。**

### 1.shallowRef 与 shallowReactive ###

我们直接使用代码解释如何使用。

**新建App.vue实现了一个简单的求和和修改人物信息的功能。**

![78cb39d006ff4de582d92eb08b0ff861.png][]

**我们使用 `ref` 创建了名为 `sum` 和 `person` 的响应式引用**

**`changeSum` 函数在点击按钮时将 `sum` 的值加1，`changeName` 函数将 `person` 的姓名修改为 "李四"，`changeAge` 函数将 `person` 的年龄加1，`changePerson` 函数将整个 `person` 对象替换为一个新的对象。**

**展示：**

![ea56a16a3b2a4db295d986d22ecff8ef.png][]

**当我点击按钮时：**

![8ca0e7b3b8364d568aa262c9c8d0fe4c.png][]

![3906e97d985b4ff1b6b584a4496422f7.png][]

**现在，我将shallowRef来替换掉Ref**

![6f83fd3384384da09815b54a53045cc8.png][]

![75184742b98e4406b3f22c781e19ab39.png][]

**这是为什么呢？**

**因为shallowRef是浅层响应的意思，它只能调用第一层，深层次的则不行**

![38feb90ee2154fb78086ef5562faac6d.png][]

**你可以这么理解，就只能有一个.value，后面再跟就没有响应了。**

**而shallowReactive的作用跟shallowRef一样的，不赘述了**

**作用：**

> **`shallowRef` 的作用是将一个普通的 JavaScript 对象或数组转换为响应式对象，但不会递归地将对象或数组中的每个属性或元素都转换为响应式。这意味着当你修改对象或数组的属性或元素时，不会触发视图的更新。**
> 
> **与之相反，`ref` 会将对象或数组的每个属性或元素都转换为响应式。这意味着当你修改对象或数组的属性或元素时，视图将会自动更新。**
> 
> **换言之，如果我们修改了对象内部属性或数组内部元素，视图不会自动更新。只有当我们修改了对象或数组本身时，视图才会更新以反映这种变化。这种行为适用于当我们只关心对象或数组的引用变化，而不关心其内部属性或元素的具体变化时。这样可以提高性能，减少不必要的监测和更新操作。**

**总而言之：**

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

--------------------

### 2.readonly 与 shallowReadonly ###

1.  **作用**：**用于创建一个对象的深只读副本。**
2.  **用法**：
    
    >     const original = reactive({ ... });
    >     const readOnlyCopy = readonly(original);
3.  **特点**：
    
     *  **对象的所有嵌套属性都将变为只读。**
     *  **任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。**

`readonly` **和 `shallowReadonly` 是 Vue 3 中提供的用于创建只读的响应式引用的函数。**

**概念：**

想象一下，你有一个对象或数组，你希望它在被使用的时候不能被修改。就好像你给别人一个只读的物品，他们可以查看它，但不能改变它的内容。

**`readonly` 的作用就是将一个对象或数组转换为只读的响应式引用。这意味着当你使用 `readonly` 创建的变量时，它是只读的，你不能直接修改它的值。如果你尝试修改它，Vue 3 会发出警告，并且不会更新视图。**

**`shallowReadonly` 与 `readonly` 类似，也是用于创建只读的响应式引用，但它是浅层只读的。**这意味着，如果你使用 `shallowReadonly` 创建的变量是一个对象或数组，你可以阅读它的属性或元素，但不能修改属性或元素的值。然而，如果属性或元素是对象或数组，你可以修改它们的值。这样做是为了保持引用的只读特性，同时允许引用内部的对象或数组进行更改。

`readonly`：

下面运用例子解释：

**这段代码是一个网页应用，有两个按钮和两个显示结果的文本。你可以点击按钮来增加两个求和的结果。**

![459dd315bdd64e169b08ea642bad888b.png][]

**甚至你会注意代码第22行报错，就是因为sum2提示只能读不能改**。

![092278f3a07c420dbcad3c38be17a24e.png][]

报错的原因简单讲就是，里面不能是数据类型的参数，要放入的是具有响应式的参数，同时要把后面的.value去掉。

其中，`sum1` 是一个可以被修改的变量，表示一个求和结果。而 `sum2` 是一个只读的变量，它的值始终与 `sum1` 相同，但不能直接修改它。

当你点击 "点我sum1+1" 按钮时，`sum1` 的值会加1，而页面上显示的结果会更新。但是，当你点击 "点我sum2+1" 按钮时，尽管 `sum2` 的值与 `sum1` 相同，但它是只读的，不能直接修改它。因此，点击这个按钮并不会改变 `sum2` 的值，也不会更新页面上的结果。

这在某些情况下很有用，例如当你想向其他组件传递数据，但不希望其他组件能够修改它。`readonly` 可以确保数据的稳定性和可靠性，避免不必要的副作用。

**展示：**

![80c336d6afed4afab769552206c824fe.png][]

补充：

![092278f3a07c420dbcad3c38be17a24e.png][]

**报错的原因简单讲就是，里面不能是数据类型的参数，要放入的是具有响应式的参数，同时要把后面的.value去掉。**

--------------------

**`shallowReadonly：`**

**作用：与 `readonly` 类似，但只作用于对象的顶层属性。**

**用法：**

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

**特点：**

*  **只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。**
 *  **适用于只需保护对象顶层属性的场景。**

**下面举例子解释：**

![6af57aab6e5344489a63c4f9f979adc2.png][]

**`car1` 是一个包含汽车信息的对象，包括品牌、选项等。`car2` 是一个浅层只读的变量，它与 `car1` 相关联，但只能修改其属性的值，而不能修改整个对象或其属性的引用。**

![65e2cb9bc73f46898ee018c5be6dca6d.png][]

**App.vue代码：**

<template>
    	<div class="app">
    		<h2>当前sum1为:{
       { sum1 }}</h2>
    		<h2>当前sum2为:{
       { sum2 }}</h2>
    		<h2>当前car1为:{
       { car1 }}</h2>
    		<h2>当前car2为:{
       { car2 }}</h2>
    		<button @click="changeSum1">点我sum1+1</button>
    		<button @click="changeSum2">点我sum2+1</button>
    		<button @click="changeBrand2">修改品牌(car2)</button>
    		<button @click="changeColor2">修改颜色(car2)</button>
    		<button @click="changePrice2">修改价格(car2)</button>
    	</div>
    </template>
    
    <script setup lang="ts" name="App">
    	import { ref,reactive,readonly,shallowReadonly } from "vue";
    
    	let sum1 = ref(0)
    	let sum2 = readonly(sum1)
    	let car1 = reactive({
    		brand:'奔驰',
    		options:{
    			color:'红色',
    			price:100
    		}
    	})
    	let car2 = shallowReadonly(car1)
    
    	function changeSum1(){
    		sum1.value += 1
    	}
    	function changeSum2(){
    		sum2.value += 1 //sum2是不能修改的
    	}
    
    	function changeBrand2(){
    		car2.brand = '宝马'
    	}
    	function changeColor2(){
    		car2.options.color = '绿色'
    	}
    	function changePrice2(){
    		car2.options.price += 10
    	}
    </script>
    
    <style scoped>
    	.app {
    		background-color: #ddd;
    		border-radius: 10px;
    		box-shadow: 0 0 10px;
    		padding: 10px;
    	}
    	button {
    		margin:0 5px;
    	}
    </style>

--------------------

### 3.toRaw 与 markRaw ###

**`关于toRaw：`**

1.  **作用：用于获取一个响应式对象的原始对象， `toRaw` 返回的对象不再是响应式的，不会触发视图更新。**
    
    > **官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。**
    
    > **何时使用？ —— 在需要将响应式对象传递给非 `Vue` 的库或外部系统时，使用 `toRaw` 可以确保它们收到的是普通对象**

**下面举一个例子解释：**

![cf47dc8fce244af69e380eee748525d5.png][]

我们使用 `reactive` 函数创建了一个名为 `person` 的响应式对象，其中包含姓名和年龄的属性。然后，我们使用 `toRaw` 函数获取了 `person` 对象的原始非响应式版本，并将其保存在 `rawPerson` 变量中。

**`toRaw` 函数用于获取一个响应式对象的原始对象，即没有被包装成响应式的普通对象。**在这个例子中，我们将响应式的 `person` 对象传递给 `toRaw` 函数，它返回了一个与 `person` 相同属性和值的普通对象。

**在控制台中，我们打印了 `person` 和 `rawPerson` 的值，以展示它们之间的区别。**

**展示：**

![3bc9d6d0639a4a90b13ec4d4d2ed8153.png][]

**注意：**

不建议保存对原始对象的持久引用，请谨慎使用。

**就是以上使用 `toRaw` 函数获取了 `person` 对象的原始非响应式的操作。谨慎使用是为了防止person和Rawperson搞混。**

--------------------

**关于markRaw：**

1.  **作用**：**标记一个对象，使其永远不会变成响应式的。**
    
    > **例如使用`mockjs`时，为了防止误把`mockjs`变为响应式对象，可以使用 `markRaw` 去标记`mockjs`**

![8c4eb5acd3f84599bd2797bdc2289444.png][]

![f9df89079d9d45f5a29f96d06503c681.png][]

**然后用markRaw（）标记**

![e817df0a09af430093cc6e998ec6ca6e.png][]

![cabebac9608e4510a6c356c39a4187b8.png][]

**所以被markRaw标记一个对象后，使其永远不会变成响应式的。**

**补充：**

**使用场景：使用`mockjs`时，为了防止误把`mockjs`变为响应式对象，可以使用 `markRaw` 去标记`mockjs`**

Mock.js是一个用于生成随机数据和模拟HTTP请求响应的JavaScript库。它可以帮助前端开发人员在开发过程中模拟接口数据，以便更好地进行前后端分离和并行开发。

**1.安装Mock.js**![b5ffb4cd4abf432f89d763fd7126094d.png][]

**2.用mockjs标记**

![35de2b2f2b4644ffa68bba0a3a5fc5a3.png][]

**App.vue代码：**

<template>
    	<div class="app">
    		<h2>姓名：{
       { person.name }}</h2>
    		<h2>年龄：{
       { person.age }}</h2>
    		<button @click="person.age += 1">修改年龄</button>
    		<hr>
    		<h2>{
       { car2 }}</h2>
    		<button @click="car2.price += 10">点我价格+10</button>
    		
    	</div>
    </template>
    
    <script setup lang="ts" name="App">
    	import { reactive,toRaw,markRaw } from "vue";
    	import mockjs from 'mockjs'
    
    	/* toRaw */
    	let person = reactive({
    		name:'tony',
    		age:18
    	})
    	// 用于获取一个响应式对象的原始对象 
    	let rawPerson = toRaw(person)
    	// console.log('响应式对象',person)
    	// console.log('原始对象',rawPerson)
    
    	let car = markRaw({brand:'奔驰',price:100})
    	let car2 = reactive(car)
    
    	console.log(car)
    	console.log(car2)
    
    	let mockJs = markRaw(mockjs)
    
    
    
    
    
    
    </script>
    
    <style scoped>
    	.app {
    		background-color: #ddd;
    		border-radius: 10px;
    		box-shadow: 0 0 10px;
    		padding: 10px;
    	}
    	button {
    		margin:0 5px;
    	}
    </style>

--------------------

### 4.customRef ###

**概念：**

> **我们知道，当我们在Vue中使用`ref`函数创建响应式数据时，它会帮助我们包装一个值，并且在这个值发生变化时通知相关的组件进行更新。这样我们就可以在组件中直接使用这个响应式数据，并且可以轻松地对其进行修改和访问。**
> 
> **而`customRef`就是一个更高级的工具，它允许我们自定义响应式引用的行为。我们可以定义一个自己的跟踪器逻辑，来决定何时触发更新、如何处理值的变化等等。这样可以满足一些特殊的需求，例如延迟更新、异步更新等。**
> 
> **所以，你可以将`customRef`看作是一个可以根据你的需求定制的响应式引用。它给了你更多的自由度和控制权，让你可以实现一些定制化的响应式行为，以适应你的项目需求。**

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

**举例子解释：**

![7a097e083995442e9aef41e97c57ae99.png][]

![63d64131f2234f3cb9cc2c63a3551afc.png][]

现在有一个业务需求，**当我在输入框修改时，标延迟1s后才显示**，但是普通的ref是会立即显示，没有办法，只能用customRef（自定义的ref）

以下步骤：

**1.引入customRef包，写出customRef的回调函数**

![cf620f5801e24aef95998bd4f3b7a694.png][]

**2.回调函数里面写出return**

![d638bc0742e9438f9d7c93f88f5c8725.png][]

**3.写出get(),set()**

![2668b61cda66424889389972abaa1a9f.png][]

**4.导入跟踪器（track）和触发器（trigger）**

![411883b4d2c44a09ba2edaa76d3fa0d3.png][]

**重点：**

**跟踪器（track）用于侦听数据的变化，而触发器（trigger）用于触发相应的操作。**

**5.在里面修改延迟1s的业务**

![5d0e3cc238e24a5a9ec1ae4e3dc13545.png][]

**代码解析：**

调用`clearTimeout(timer)`来清除之前的延时器（如果存在）。这样可以确保在设置新的延时器之前，之前的延时器已经被取消。然后，使用`setTimeout`函数创建一个新的延时器，它会在1000毫秒（即1秒）后执行一个回调函数。

回调函数中的代码会将传入的`value`赋给`initValue`，即更新了数据。然后，通过`trigger()`方法通知Vue数据`msg`发生了变化，使其重新渲染相关的组件。

**展示：**

![50198ead61ea490dbab958e55df10edb.png][]

--------------------

**App.vue代码：**

<template>
    	<div class="app">
    		<h2>{
       { msg }}</h2>
    		<input type="text" v-model="msg">
    	</div>
    </template>
    
    <script setup lang="ts" name="App">
    	import {ref,customRef} from 'vue'
    	
    
    	// 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
    	//let msg = ref('你好')
    
    	// 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
    	let initValue = '你好'
    	let timer:number
    	let msg = customRef((track,trigger)=>{
    		return{
    			// get何时调用? - msg被读取时
    		 get(){
    			track();//告诉Vue数据msg很重要，你要对msg进行持续关注，一旦msg变化就去更新
    			return initValue;
    
    		 },
    		  // set何时调用? - msg被修改时
    		 set(value){
    			clearTimeout(timer)
    			timer = setTimeout(()=>{
    				initValue = value
    				trigger(); //通知Vue一下数据msg变化了
    			},1000);
    			
    		 }
    		}
    	})
    
    
    </script>
    
    <style scoped>
    	.app {
    		background-color: #ddd;
    		border-radius: 10px;
    		box-shadow: 0 0 10px;
    		padding: 10px;
    	}
    	button {
    		margin:0 5px;
    	}
    </style>

--------------------

**但是这样写还是写不够方便简洁，以后有新的业务时要修改的地方太多**

**还可以更近一步的完善，如下：**

**1.封装一个hoolks，将逻辑代码写入进去。**

![b55d9e185c16414ca34dccb0b5e63a28.png][]

**代码解析：**

方法会返回一个具有延迟更新功能的数据对象。你可以把它想象成一个计时器。

当你在组件中使用该方法时，你需要传递两个参数：**初始值和延迟时间**。初始值就是数据的初始内容，而延迟时间表示在用户输入后等待多长时间才进行更新。

在内部，这个函数使用了Vue提供的\`customRef\`函数，它可以帮助我们创建一个自定义的数据跟踪器。

这个数据跟踪器有两个方法：\`get\`和\`set\`。当其他部分代码读取数据时，就会调用\`get\`方法。然后，我们返回数据的当前值。

当其他部分代码修改数据时，就会调用\`set\`方法**。在这个方法中，我们首先清除之前的计时器，以防止数据更新发生太频繁。然后，我们创建一个新的计时器，在延迟时间后执行一个回调函数。在回调函数中，我们将数据的值更新为新值，并通知Vue数据发生了变化。**

最后，函数返回一个包含延迟更新的数据对象，你可以在组件中使用它。当你读取这个数据时，**Vue会自动追踪它，并在数据发生变化时更新相关的组件。而当你修改这个数据时，它会等待一段时间后才进行更新操作，以避免过于频繁的更新。**

**2.在App.vue中使用该文件**

![d1c1db282e67425e9294d48ed4a78d34.png][]

![c383378e4f094591852147ecc5f9bc9d.png][]

**useMsgRef.ts代码：**

import { customRef } from "vue";
    
    export default function(initValue:string,delay:number){
      // 使用Vue提供的customRef定义响应式数据
      let timer:number
      // track(跟踪)、trigger(触发)
      let msg = customRef((track,trigger)=>{
        return {
          // get何时调用？—— msg被读取时
          get(){
            track() //告诉Vue数据msg很重要，你要对msg进行持续关注，一旦msg变化就去更新
            return initValue
          },
          // set何时调用？—— msg被修改时
          set(value){
            clearTimeout(timer)
            timer = setTimeout(() => {
              initValue = value
              trigger() //通知Vue一下数据msg变化了
            }, delay);
          }
        }
      })
      return {msg}
    }

**App.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('你好',3000)
    
    </script>
    
    <style scoped>
    	.app {
    		background-color: #ddd;
    		border-radius: 10px;
    		box-shadow: 0 0 10px;
    		padding: 10px;
    	}
    	button {
    		margin:0 5px;
    	}
    </style>

--------------------

**总结：**

本文介绍了一些Vue 3中的响应式API，包括**`shallowRef`、`shallowReactive`、`readonly`、`shallowReadonly`、`toRaw`、`markRaw`和`customRef`。**

*  `shallowRef`和`shallowReactive`是用于创建响应式数据的函数。`shallowRef`创建一个浅层响应式引用，而`shallowReactive`创建一个浅层响应式对象。
 *  `readonly`和`shallowReadonly`用于创建只读的响应式数据。`readonly`创建一个深层只读响应式对象，而`shallowReadonly`创建的对象只有顶层属性是只读的。
 *  `toRaw`和`markRaw`用于处理响应式数据的原始值。`toRaw`用于获取响应式对象的原始值，而`markRaw`用于标记一个对象，使其在响应式转换时保持不可响应。
 *  `customRef`是一个自定义的响应式引用创建函数，允许开发者定义自己的跟踪器逻辑，实现更高级的响应式行为。

[78cb39d006ff4de582d92eb08b0ff861.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c7e39d8000df4e1aab91b6a2918929c9.png
[ea56a16a3b2a4db295d986d22ecff8ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7cd2445405d84e8d8ac39d254df0710a.png
[8ca0e7b3b8364d568aa262c9c8d0fe4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f07fbdbc383b4641a4329d44330e945e.png
[3906e97d985b4ff1b6b584a4496422f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/be18f65d27074aecbae121b7dab6b866.png
[6f83fd3384384da09815b54a53045cc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/527f5a754e494a9eab59db2ad14ca57f.png
[75184742b98e4406b3f22c781e19ab39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/cc3c10c29aa34c27838a859891837b05.png
[38feb90ee2154fb78086ef5562faac6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/095d14c31f004844af5a9510a01f530c.png
[shallowRef]: https://cn.vuejs.org/api/reactivity-advanced.html#shallowref
[shallowReactive]: https://cn.vuejs.org/api/reactivity-advanced.html#shallowreactive
[459dd315bdd64e169b08ea642bad888b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6c5bb1e2e83143e8ae66432f009bccaa.png
[092278f3a07c420dbcad3c38be17a24e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/fb7b06657f8a4288b50cab0a816d1642.png
[80c336d6afed4afab769552206c824fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/aee6134503e346b2a6936488f33179ef.png
[6af57aab6e5344489a63c4f9f979adc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/36a23948f5f74c9eb2d9608e5992f7c7.png
[65e2cb9bc73f46898ee018c5be6dca6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/57f6b38990d94c6a8b68155b8746132e.png
[cf47dc8fce244af69e380eee748525d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7d3e11f6a4e44cc6a82fb22571d756d0.png
[3bc9d6d0639a4a90b13ec4d4d2ed8153.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/48ce0d356f0d4191a6bf5986a68806de.png
[8c4eb5acd3f84599bd2797bdc2289444.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/95a6a74174fe447ba330ef0879ed67a3.png
[f9df89079d9d45f5a29f96d06503c681.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/fd0f5ffe8d1b47c989cfff872efb9cc3.png
[e817df0a09af430093cc6e998ec6ca6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3edc39c79fef4b619f1394a5bb42dd06.png
[cabebac9608e4510a6c356c39a4187b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d73dddbe2910477d88845a3fcbd79cb6.png
[b5ffb4cd4abf432f89d763fd7126094d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ee6c9bb7ec504858873ec742993b56ae.png
[35de2b2f2b4644ffa68bba0a3a5fc5a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8495b30443e6463f9952e2bef77c6358.png
[7a097e083995442e9aef41e97c57ae99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/363fd427510346aab11fb90839481533.png
[63d64131f2234f3cb9cc2c63a3551afc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/46bed6d989304317a72d7cd1e3e580a6.png
[cf620f5801e24aef95998bd4f3b7a694.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/2688d76520174d58b1f59fe9842ae021.png
[d638bc0742e9438f9d7c93f88f5c8725.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1faa616b02c946dc89f1e1e0bd3ca859.png
[2668b61cda66424889389972abaa1a9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/95578d67c5ba47a2b6e34a8257abacef.png
[411883b4d2c44a09ba2edaa76d3fa0d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/47ebd5f653ac46b592c7ae6323f7824d.png
[5d0e3cc238e24a5a9ec1ae4e3dc13545.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c13bcb489d89469bba089a1383b19bf4.png
[50198ead61ea490dbab958e55df10edb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/751360ec716342b9a45cba41c47dd1df.png
[b55d9e185c16414ca34dccb0b5e63a28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c1d39c65fd0a4ffa9b707bcd43465857.png
[d1c1db282e67425e9294d48ed4a78d34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ba0e898a3a714e84af7a741c65fc285d.png
[c383378e4f094591852147ecc5f9bc9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d99f2599c0d04687b63b01aac25905e7.png