Vue掌握程度自测，你是荣耀黄金还是嘴强王者？（一）

Bertha 。 2022-08-31 10:00 94阅读 0赞

![46df7c289428cde5c53d9d38ffb84c6c.png][]

## 荣耀黄金 ##

### 1. Vue的优点？Vue的缺点？ ###

优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开

缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长

### 2. 为什么说Vue是一个渐进式框架？ ###

渐进式：通俗点讲就是，你想用啥你就用啥，咱也不强求你。你想用component就用，不用也行，你想用vuex就用，不用也可以

![e2280374f1de2c105145c511463b44c9.png][]

### 3. Vue跟React的异同点？ ###

相同点：

*  1.都使用了虚拟dom
 *  2.组件化开发
 *  3.都是单向数据流(父子组件之间，不建议子修改父传下来的数据)
 *  4.都支持服务端渲染

不同点：

*  1.React的JSX，Vue的template
 *  2.数据变化，React手动(setState)，Vue自动(初始化已响应式处理，Object.defineProperty)
 *  3.React单向绑定，Vue双向绑定
 *  4.React的Redux，Vue的Vuex

### 4. MVVM是什么？和MVC有何区别呢？ ###

MVC

*  Model(模型)：负责从数据库中取数据
 *  View(视图)：负责展示数据的地方
 *  Controller(控制器)：用户交互的地方，例如点击事件等等
 *  思想：Controller将Model的数据展示在View上

![769cbf3c12cfb5ffd2f98f7322b6f4a3.png][]

MVVM

*  VM：也就是View-Model，做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
 *  思想：实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

![be361ac9e7647498649785dc6da4e963.png][]

区别

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性

Vue是不是MVVM框架？

Vue是MVVM框架，但是不是严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue的`ref`可以做到这点

### 5. Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？ ###

*  1.jQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据即可
 *  2.jQuery的操作DOM行为是频繁的，而Vue利用虚拟DOM的技术，大大提高了更新DOM时的性能
 *  3.Vue中不倡导直接操作DOM，开发者只需要把大部分精力放在数据层面上
 *  4.Vue集成的一些库，大大提高开发效率，比如Vuex，Router等

### 6. Vue的作者是谁？大声说出它的名字！！！ ###

他的名字就是：鱿鱼西

## 永恒钻石 ##

### 7. 为什么data是个函数并且返回一个对象呢？ ###

`data`之所以只一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行`data函数`并返回新的数据对象，这样，可以避免多处调用之间的`数据污染`。

### 8. 使用过哪些Vue的修饰符呢？ ###

![cdcb4f59a1ccd5e989e8a2268068128f.png][]

### 9. 使用过哪些Vue的内部指令呢？ ###

![66da2ca97149556a0b1842120eb5df33.png][]

### 10. 组件之间的传值方式有哪些？ ###

*  父组件传值给子组件，子组件使用`props`进行接收
 *  子组件传值给父组件，子组件使用`$emit+事件`对父组件进行传值
 *  组件中可以使用`$parent`和`$children`获取到父组件实例和子组件实例，进而获取数据
 *  使用`$attrs`和`$listeners`，在对一些组件进行二次封装时可以方便传值，例如A->B->C
 *  使用`$refs`获取组件实例，进而获取数据
 *  使用`Vuex`进行状态管理
 *  使用`eventBus`进行跨组件触发事件，进而传递数据
 *  使用`provide`和`inject`，官方建议我们不要用这个，我在看`ElementUI`源码时发现大量使用
 *  使用浏览器本地缓存，例如`localStorage`

### 11. 路由有哪些模式呢？又有什么不同呢？ ###

*  hash模式：通过`#号`后面的内容的更改，触发`hashchange`事件，实现路由切换
 *  history模式：通过`pushState`和`replaceState`切换url，触发`popstate`事件，实现路由切换，需要后端配合

### 12. 如何设置动态class，动态style？ ###

*  动态class对象：`<div :class="{ 'is-active': true, 'red': isRed }"></div>`
 *  动态class数组：`<div :class="['is-active', isRed ? 'red' : '' ]"></div>`
 *  动态style对象：`<div :style="{ color: textColor, fontSize: '18px' }"></div>`
 *  动态style数组：`<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>`

### 13. v-if和v-show有何区别？ ###

*  1.`v-if`是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁
 *  2.`v-show`是通过控制dom元素的css样式来实现显隐，不会销毁
 *  3.频繁或者大数量显隐使用`v-show`，否则使用`v-if`

### 14. computed和watch有何区别？ ###

*  1.`computed`是依赖已有的变量来计算一个目标变量，大多数情况都是`多个变量`凑在一起计算出`一个变量`，并且`computed`具有`缓存机制`，依赖值不变的情况下其会直接读取缓存进行复用，`computed`不能进行`异步操作`
 *  2.`watch`是监听某一个变量的变化，并执行相应的回调函数，通常是`一个变量`的变化决定`多个变量`的变化，`watch`可以进行`异步操作`
 *  3.简单记就是：一般情况下`computed`是`多对一`，`watch`是`一对多`

### 15. Vue的生命周期，讲一讲？ ###

![9b7accbed4e919b4361b8e893bbbd52e.png][]

### 16. 为什么v-if和v-for不建议用在同一标签？ ###

在Vue2中，`v-for`优先级是高于`v-if`的，咱们来看例子

上面的写法是`v-for`和`v-if`同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：

<div v-for="item in list">
        {
       {item}}
    </div>
    
    computed() {
        list() {
            return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
        }
      }

### 17. vuex的有哪些属性？用处是什么？ ###

![78e82c3546696fff99522b1a9eb21a47.png][]

*  State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
 *  Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
 *  Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
 *  Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
 *  Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

## 至尊星耀 ##

### 18. 不需要响应式的数据应该怎么处理？ ###

在我们的Vue开发中，会有一些数据，从始至终都`未曾改变过`，这种`死数据`，既然`不改变`，那也就`不需要对他做响应式处理`了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的`死数据`，如果都进行响应式处理，那会消耗大量性能。

// 方法一：将数据定义在data之外
    data () {
        this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
        this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
        this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
        this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
        this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
        return {}
     }
        
    // 方法二：Object.freeze()
    data () {
        return {
            list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
            list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
            list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
            list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
            list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        }
     }

### 19. watch有哪些属性，分别有什么用？ ###

当我们监听一个基本数据类型时：

watch: {
        value () {
            // do something
        }
    }

当我们监听一个引用数据类型时：

watch: {
        obj: {
           handler () { // 执行回调
               // do something
           },
           deep: true, // 是否进行深度监听
           immediate: true // 是否初始执行handler函数
        }
    }

### 20. 父子组件生命周期顺序 ###

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

### 21. 对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？ ###

*  原因：`Object.defineProperty`没有对对象的新属性进行属性劫持
 *  对象新属性无法更新视图：使用`Vue.$set(obj, key, value)`，组件中`this.$set(obj, key, value)`
 *  删除属性无法更新视图：使用`Vue.$delete(obj, key)`，组件中`this.$delete(obj, key)`

### 22. 直接arr\[index\] = xxx无法更新视图怎么办？为什么？怎么办？ ###

*  原因：Vue没有对数组进行`Object.defineProperty`的属性劫持，所以直接arr\[index\] = xxx是无法更新视图的
 *  使用数组的splice方法，`arr.splice(index, 1, item)`
 *  使用`Vue.$set(arr, index, value)`

### 23. 自定义指令 ###

建议看这篇文章[8个非常实用的Vue自定义指令][8_Vue]

### 24. 插槽的使用以及原理？ ###

### 25. 为什么不建议用index做key，为什么不建议用随机数做key？ ###

举个例子：

<div v-for="(item, index) in list" :key="index">{
       {item.name}}</div>
    
    list: [
        { name: '小明', id: '123' },
        { name: '小红', id: '124' },
        { name: '小花', id: '125' }
    ]
    
    渲染为
    <div key="0">小明</div>
    <div key="1">小红</div>
    <div key="2">小花</div>
    
    现在我执行 list.unshift({ name: '飘哥', id: '122' })
    
    渲染为
    <div key="0">小林</div>
    <div key="1">小明</div>
    <div key="2">小红</div>
    <div key="3">小花</div>
    
    新旧对比
    
    <div key="0">小明</div>  <div key="0">小林</div>
    <div key="1">小红</div>  <div key="1">小明</div>
    <div key="2">小花</div>  <div key="2">小红</div>
                             <div key="3">小花</div>
    
    可以看出，如果用index做key的话，其实是更新了原有的三项，并新增了小花，虽然达到了渲染目的，但是损耗性能
    
    现在我们使用id来做key，渲染为
    
    <div key="123">小明</div>
    <div key="124">小红</div>
    <div key="125">小花</div>
    
    现在我执行 list.unshift({ name: '飘哥', id: '122' })，渲染为
    
    <div key="122">小林</div>
    <div key="123">小明</div>
    <div key="124">小红</div>
    <div key="125">小花</div>
    
    新旧对比
    
                               <div key="122">飘哥</div>
    <div key="123">小明</div>  <div key="123">小明</div>
    <div key="124">小红</div>  <div key="124">小红</div>
    <div key="125">小花</div>  <div key="125">小花</div>
    
    可以看出，原有的三项都不变，只是新增了小林这个人，这才是最理想的结果

用`index`和用`随机数`都是同理，`随机数`每次都在变，做不到专一性，很`渣男`，也很消耗性能，所以，拒绝`渣男`，选择`老实人`

### 26. 说说nextTick的用处？ ###

我举个例子，在vue中：

this.name = '胡'
    this.age = 18
    this.gender = '男'

我们修改了三个变量，那问题来了，是每修改一次，DOM就更新一次吗？不是的，Vue采用的是`异步更新`的策略，通俗点说就是，`同一事件循环内`多次修改，会`统一`进行一次`视图更新`，这样才能节省性能嘛

看懂了上面，那你应该也看得懂下面的例子了吧：

<div ref="testDiv">{
       {name}}</div>
    
    name: '胡'
    
    this.name = '胡飘'
    console.log(this.$refs.testDiv.innerHTML) // 这里是啥呢

答案是“胡飘”，前面说了，Vue是`异步更新`，所以数据一更新，视图却还没更新，所以拿到的还是上一次的旧视图数据，那么想要拿到最新视图数据怎么办呢？

this.name = '胡'
    this.$nextTick(() => {
        console.log(this.$refs.testDiv.innerHTML) // 胡飘
    })

### 27. Vue的SSR是什么？有什么好处？ ###

*  `SSR`就是服务端渲染
 *  基于`nodejs serve`服务环境开发，所有`html`代码在服务端渲染
 *  数据返回给前端，然后前端进行“激活”，即可成为浏览器识别的html代码
 *  `SSR`首次加载更快，有更好的用户体验，有更好的seo优化，因为爬虫能看到整个页面的内容，如果是vue项目，由于数据还要经过解析，这就造成爬虫并不会等待你的数据加载完成，所以其实Vue项目的seo体验并不是很好

## 最强王者 ##

### 28. Vue响应式是怎么实现的？ ###

整体思路是数据劫持+观察者模式

对象内部通过 `defineReactive` 方法，使用 `Object.defineProperty` 将属性进行劫持（只会劫持已经存在的属性），数组则是通过重写数组方法来实现。当页面使用对应属性时，每个属性都拥有自己的`dep`属性，存放他所依赖的 `watcher`（依赖收集），当属性变化后会通知自己对应的 `watcher` 去更新(派发更新)。

const { arrayMethods } = require('./array')
    
    class Observer {
        constructor(value) {
            Object.defineProperty(value, '__ob__', {
                value: this,
                enumerable: false,
                writable: true,
                configurable: true
            })
            if(Array.isArray(value)) {
                value.__proto__ = arrayMethods
                this.observeArray(value)
            } else {
                this.walk(value)
            }
        }
    
        walk(data) {
            let keys = Object.keys(data)
            for(let i = 0; i < keys.length; i++) {
                const key = keys[i]
                const value = data[key]
                defineReactive(data, key, value)
            }
        }
    
        observeArray(items) {
            for(let i = 0; i < items.length; i++) {
                observe(items[i])
            }
        }
    }
    
    function defineReactive(data, key, value) {
        const childOb = observe(value)
    
        const dep = new Dep()
    
        Object.defineProperty(data, key, {
            get() {
                console.log('获取值')
                if (Dep.target) {
                    dep.depend()
    
                    if (childOb) {
                        childOb.dep.depend()
    
                        if (Array.isArray(value)) {
                            dependArray(value)
                        }
                    }
                }
                return value
            },
            set(newVal) {
                if (newVal === value) return
                observe(newVal)
                value = newVal
                dep.notify()
            }
        })
    }
    
    function observe(value) {
        if (Object.prototype.toString.call(value) === '[object Object]' || Array.isArray(value)) {
            return new Observer(value)
        }
    }
    
    function dependArray(value) {
        for(let e, i = 0, l = value.length; i < l; i++) {
            e = value[i]
    
            e && e.__ob__ && e.__ob__.dep.depend()
    
            if (Array.isArray(e)) {
                dependArray(e)
            }
        }
    }
    
    // array.js
    const arrayProto = Array.prototype
    
    const arrayMethods = Object.create(arrayProto)
    
    const methodsToPatch = [
        'push',
        'pop',
        'shift',
        'unshift',
        'splice',
        'reverse',
        'sort'
    ]
    
    methodsToPatch.forEach(method => {
        arrayMethods[method] = function (...args) {
            const result = arrayProto[method].apply(this, args)
    
            const ob = this.__ob__
    
            var inserted
    
            switch (method) {
                case 'push':
                case 'unshift':
                    inserted = args
                    break;
                case 'splice':
                    inserted = args.slice(2)
                default:
                    break;
            }
    
            if (inserted) ob.observeArray(inserted)
    
            ob.dep.notify()
    
            return result
        }
    })

### 29. 为什么只对对象劫持，而要对数组进行方法重写？ ###

因为对象最多也就几十个属性，拦截起来数量不多，但是数组可能会有几百几千项，拦截起来非常耗性能，所以直接重写数组原型上的方法，是比较节省性能的方案

### 30. Vue的模板编译原理？ ###

### 31. Vue的computed和watch的原理？ ###

### 32. Vue.set方法的原理？ ###

function set(target, key, val) {
        // 判断是否是数组
        if (Array.isArray(target)) {
            // 判断谁大谁小
            target.length = Math.max(target.length, key)
            // 执行splice
            target.splice(key, 1, val)
            return val
        }
    
        const ob = target.__ob__
    
        // 如果此对象没有不是响应式对象，直接设置并返回
        if (key in target && !(key in target.prototype) || !ob) {
            target[key] = val
            return val
        }
    
        // 否则，新增属性，并响应式处理
        defineReactive(target, key, val)
        return val
    }

### 33. Vue.delete方法的原理？ ###

function del (target, key) {
        // 判断是否为数组
        if (Array.isArray(target)) {
            // 执行splice
            target.splice(key, 1)
            return
        }
    
        const ob = target.__ob__
    
        // 对象本身就没有这个属性，直接返回
        if (!(key in target)) return
    
        // 否则，删除这个属性
        delete target[key]
    
        // 判断是否是响应式对象，不是的话，直接返回
        if (!ob) return
        // 是的话，删除后要通知视图更新
        ob.dep.notify()
    }

### 34. nextTick的原理？ ###

### 35. key有什么用？说说diff算法吧？ ###

直接看这篇吧：[为什么 Vue 中不要用 index 作为 key？（diff 算法详解）][Vue _ index _ key_diff]

我讲的没他好

为了帮助大家对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，整理了85道 Vue 面试题，整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢！

### Vue 面试题总结 ###

#### **vue-cli工程** ####

*  构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？
 *  vue-cli 工程常用的 npm 命令有哪些？
 *  请说出vue-cli工程中文件夹和文件的用处
 *  config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
 *  请你详细介绍一些 package.json 里面的配置

#### **vue核心知识点** ####

*  对于Vue是一套渐进式框架的理解
 *  vue.js的两个核心是什么？
 *  请问 v-if 和 v-show 有什么区别
 *  vue常用的修饰符
 *  v-on可以监听多个方法吗？
 *  vue中 key 值的作用
 *  vue-cli工程升级vue版本
 *  vue事件中如何使用event对象？
 *  $nextTick的使用
 *  Vue 组件中 data 为什么必须是函数
 *  v-for 与 v-if 的优先级
 *  vue中子组件调用父组件的方法
 *  vue中 keep-alive 组件的作用
 *  vue中如何编写可复用的组件？
 *  什么是vue生命周期？
 *  vue生命周期钩子函数有哪些？
 *  vue如何监听键盘事件中的按键？
 *  vue更新数组时触发视图更新的方法
 *  vue中对象更改检测的注意事项
 *  解决非工程化项目初始化页面闪动问题
 *  v-for产生的列表，实现active的切换
 *  v-model语法糖的组件中的使用
 *  vue中自定义过滤器
 *  vue等单页面应用及其优缺点
 *  什么是vue的计算属性？
 *  vue-cli提供的几种脚手架模板
 *  vue父组件如何向子组件中传递数据？
 *  vue弹窗后如何禁止滚动条滚动？
 *  计算属性的缓存和方法调用的区别
 *  vue-cli中自定义指令的使用

![e46f43d80c40395e4d8b178319177da4.png][]

#### **vue-router** ####

*  vue-router如何响应 路由参数 的变化？
 *  完整的 vue-router 导航解析流程
 *  vue-router有哪几种导航钩子（ 导航守卫 ）？
 *  vue-router传递参数的几种方式
 *  vue-router的动态路由匹配
 *  vue-router如何定义嵌套路由？
 *  组件及其属性
 *  vue-router实现路由懒加载（ 动态加载路由 ）
 *  vue-router路由的两种模式
 *  history路由模式配置及后台配置

#### **vuex** ####

*  什么是vuex？
 *  使用vuex的核心概念
 *  vuex在vue-cli中的应用
 *  在vue中使用vuex，修改state的值
 *  vuex actions异步修改状态

#### **http请求** ####

*  Promise对象是什么？
 *  axios、fetch与ajax有什么区别？
 *  什么是JS的同源策略和跨域问题？
 *  如何解决跨域问题？
 *  axios有什么特点？

#### **UI样式** ####

*  .vue组件的scoped属性的作用
 *  如何让CSS只在当前组件中起作用？
 *  vue-cli中常用的UI组件库
 *  如何适配移动端？【 经典 】
 *  移动端媒体查询
 *  vue内容垂直和水平居中
 *  vue-cli引入图片的方法
 *  移动端常见样式问题
 *  文本超出隐藏

![8e8c1a4e6e27ce1efd12972b58f97817.png][]

#### **常用功能** ####

*  vue中如何实现tab切换功能？
 *  vue中keep-alive 实现标签页组件缓存
 *  vue中实现页面从右往左侧滑入效果
 *  vue中父子组件如何相互调用方法？
 *  vue中央事件总线的使用

#### **MVVM设计模式** ####

*  MVC、MVP与MVVM模式
 *  MVC、MVP与MVVM的区别
 *  MVVM的实现原理
 *  Object.defineProperty()方法
 *  ES6中定义的类和对象
 *  JS中的文档碎片
 *  解构赋值
 *  Array.from
 *  Array.reduce
 *  递归的使用
 *  Obj.keys()与Obj.defineProperty
 *  发布-订阅模式
 *  vue项目优化，缩短首屏加载时间

#### **深入拓展** ####

*  vue开发命令 npm run dev 输入后的执行过程
 *  vue的服务器端渲染
 *  从零写一个npm安装包
 *  vue-cli中常用到的加载器
 *  webpack的特点

![a6618f74c484f78262ba40404bff24c8.png][]

#### 由于篇幅限制，仅截图展示部分内容，完整版PDF资料免费分享，只需你点赞支持，[点击此处就可免费领取][Link 1] ####

[46df7c289428cde5c53d9d38ffb84c6c.png]: /images/20220829/10e869b22a174f6984dfc91eaa7fd808.png
[e2280374f1de2c105145c511463b44c9.png]: /images/20220829/54df30086ba942efb7a6cc5ff632c489.png
[769cbf3c12cfb5ffd2f98f7322b6f4a3.png]: /images/20220829/8b806c2ff2f04536aee083460c30c994.png
[be361ac9e7647498649785dc6da4e963.png]: /images/20220829/8621cc4d5a814b2b94c60b884419df35.png
[cdcb4f59a1ccd5e989e8a2268068128f.png]: /images/20220829/59d3d630b74846dcb496e46a692cef47.png
[66da2ca97149556a0b1842120eb5df33.png]: /images/20220829/b72f99b4394c4985b694cf0ef72f56b8.png
[9b7accbed4e919b4361b8e893bbbd52e.png]: /images/20220829/c24dbeca689741ca9ff80e47d14810b7.png
[78e82c3546696fff99522b1a9eb21a47.png]: /images/20220829/c7bd790dd5f24774bfdb16ddd45177f9.png
[8_Vue]: https://link.juejin.cn/?target=https%3A%2F%2Fwww.cnblogs.com%2Flzq035%2Fp%2F14183553.html
[Vue _ index _ key_diff]: https://juejin.cn/post/6844904113587634184
[e46f43d80c40395e4d8b178319177da4.png]: /images/20220829/39af8272832e48aebf12a7ff2973cb3a.png
[8e8c1a4e6e27ce1efd12972b58f97817.png]: /images/20220829/639ce731b97e4c9b890314ff9cb338a5.png
[a6618f74c484f78262ba40404bff24c8.png]: /images/20220829/b47e45e3b4524593bb8c6eb60fda5ae1.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=NgZqxZAa