面试篇：（二）Vue -2024 年前端面试技巧与面试题汇总

Vue -2024 年前端面试技巧与面试题汇总

在前端面试中，Vue.js 作为最受欢迎的前端框架之一，常常是面试中的重要考点。本篇文章将针对 Vue 的常见面试题进行详细解答，并为每个问题提供详细的回答技巧，帮助面试者深入理解 Vue 核心知识。

面试篇：（一）基础-2024 年前端面试技巧与面试题汇总

1. Vue 基础原理

(1) 什么是 Vue 的双向数据绑定？

问：Vue 是如何实现双向数据绑定的？

答：Vue 通过 Object.defineProperty 和后来的 Proxy 来实现双向数据绑定。在 Vue 2.x 中，使用 Object.defineProperty 对数据进行“劫持”，当数据发生变化时，通过“观察者模式”通知视图更新。而在 Vue 3.x 中，Vue 使用 Proxy 进行响应式处理，不仅支持数组操作，还克服了 Object.defineProperty 的一些局限性。

具体实现方式：

  • Vue 将数据对象转化为响应式对象，通过拦截对象属性的 get 和 set 操作，实时追踪依赖并在数据变化时自动更新视图。
  • 在模板中，通过指令如 v-model 实现表单输入与数据的双向绑定，视图与数据的更新是同步的。

2. Vue 生命周期

(1) 请简述 Vue 的生命周期？

问：Vue 实例从创建到销毁的生命周期有哪些阶段？

答：Vue 生命周期指的是 Vue 实例从被创建、初始化数据、编译模板、挂载 DOM、渲染、更新到销毁的过程。Vue 的生命周期钩子函数包括以下几个主要阶段：

  1. beforeCreate：实例刚刚创建，数据和事件都未初始化。
  2. created：实例创建完成，数据、事件已完成初始化，但 DOM 尚未挂载。
  3. beforeMount：模板编译完成，挂载之前。
  4. mounted：实例挂载到 DOM 上，完成初次渲染。
  5. beforeUpdate：数据变化时，更新 DOM 之前调用。
  6. updated：数据变化，视图重新渲染完成。
  7. beforeDestroy：实例销毁前调用，实例仍然可用。
  8. destroyed：实例销毁后调用，所有绑定的事件和数据都被清理。

面试技巧：面试时，重点在于说明生命周期的使用场景，如 mounted 适合进行 DOM 操作，beforeDestroy 适合执行清理工作。

3. 组件通信

(1) 父子组件之间如何通信？

问：Vue 父子组件之间的常见通信方式有哪些？

答：Vue 提供了多种父子组件通信方式：

  1. props 和 emit：父组件通过 props 向子组件传递数据，子组件通过 $emit 向父组件发送事件进行数据传递。
  2. $parent 和 $children：直接访问父组件和子组件的实例，虽然简单，但较为耦合，不推荐频繁使用。
  3. provide 和 inject：Vue 2.2 引入的特性，用于祖先组件向后代组件传递数据，适合跨层级的通信，通常用于依赖注入或状态共享。
  4. Vuex：用于跨组件甚至全局状态管理，适合大型应用。

问：如何处理多个兄弟组件之间的通信？

答：兄弟组件之间的通信通常使用事件总线或状态管理（如 Vuex）。事件总线是通过一个中央的事件中心来广播和监听事件，而 Vuex 则通过统一的状态管理机制，集中式管理应用的所有状态。

4. Vue 指令与模板

(1) 常见 Vue 指令有哪些？

问：Vue 中常用的指令有哪些？每个指令的作用是什么？

答：Vue 中常见的指令有：

  • v-bind：动态绑定属性或样式。可以简写为 :。
  • v-model：双向数据绑定，常用于表单元素。
  • v-for：循环渲染列表。
  • v-if、v-else-if、v-else：条件渲染，根据条件动态显示元素。
  • v-show：根据条件展示或隐藏元素（仅通过 CSS 控制）。
  • v-on：事件绑定，简写为 @。
  • v-slot：具名插槽，用于分发和渲染子组件内容。

(2) v-if 与 v-show 的区别？

问：v-if 和 v-show 有什么区别？

答：v-if 和 v-show 都是用于条件渲染的指令，但它们的工作机制不同：

  • v-if：按条件动态创建或销毁元素。条件为 false 时，元素被完全移除，重新渲染会进行创建和销毁操作，适合用于需要频繁切换的场景。
  • v-show：仅通过 display: none 控制元素的显示和隐藏，元素始终存在于 DOM 中，适合频繁切换的场景，性能更优。

5. Vue Router 路由管理

(1) 什么是 Vue Router 的动态路由？

问：如何在 Vue Router 中使用动态路由？

答：动态路由是指 URL 中的某些部分是动态变化的，通常用于展示不同的资源详情。Vue Router 可以通过设置带参数的路径来实现动态路由：

{path: '/user/:id',component: User
}

在组件中，可以通过 this.$route.params.id 获取动态参数。

问：如何在 Vue Router 中实现懒加载？

答：为了优化首屏加载时间，可以将路由组件按需加载，Vue Router 提供了路由懒加载的支持。实现懒加载的方式是通过 import 动态引入组件：

const routes = [{path: '/about',component: () => import('@/components/About.vue')}
]

这种方式会将路由对应的组件打包成单独的代码块，只有在访问该路由时才会加载对应的组件。

6. Vuex 状态管理

(1) Vuex 的核心概念有哪些？

问：Vuex 的核心概念有哪些？各自的作用是什么？

答：Vuex 是 Vue 的官方状态管理库，主要用于大型项目中的状态集中管理，核心概念包括：

  1. State（状态）：存储应用的全局状态数据，组件可以通过 mapState 映射到组件内部使用。
  2. Mutations（变更）：修改状态的唯一途径，必须是同步操作，使用 commit 方法触发。
  3. Actions（动作）：用于处理异步操作，通常通过 dispatch 提交到 mutations 中更新状态。
  4. Getters（派生状态）：用于从 state 中派生出计算属性，类似于组件中的计算属性。
  5. Modules（模块）：Vuex 支持模块化，将状态管理逻辑拆分为不同的模块，适合大型项目。

7. Vue 性能优化

(1) Vue 项目中如何进行性能优化？

问：如何在 Vue 项目中进行性能优化？

答：Vue 项目中的性能优化可以从多个方面进行：

  1. 懒加载与按需加载：使用路由懒加载、组件按需加载，减少首屏加载的包体积。
  2. 使用 v-if 替代 v-show：对于频繁切换的组件，优先使用 v-if 进行条件渲染。
  3. 防止不必要的重渲染：通过 v-once 指令将不变的内容静态化，避免重复渲染。
  4. 使用事件委托：减少 DOM 操作时的事件监听数量，提高性能。
  5. 使用 keep-alive 缓存组件：对于频繁切换的路由组件，可以通过 keep-alive 缓存组件状态和 DOM 节点，减少重新渲染的开销。

8. Composition API 与 Options API

(1) 什么是 Composition API？

问：简述 Vue 3 中的 Composition API，有哪些优势？

答：Composition API 是 Vue 3 引入的新特性，提供了一种基于函数的 API 来组织组件逻辑，主要由 setup 函数、响应式状态 ref 和 reactive、computed、watch 等组成。与 Options API

相比，Composition API 的优势包括：

  • 逻辑复用更灵活：可以将组件逻辑抽离成可复用的函数。
  • 代码组织更灵活：不再局限于生命周期、计算属性等特定选项，能更好地组织复杂组件逻辑。
  • 更好的 TypeScript 支持：Composition API 与 TypeScript 的结合更加自然和灵活。

9. Vue3 新特性

(1) Vue 3 与 Vue 2 的区别有哪些？

问：Vue 3 和 Vue 2 有哪些主要区别？

答：Vue 3 相比 Vue 2 做了多个重要的改进和优化，主要区别包括：

  1. 性能提升：Vue 3 通过更高效的虚拟 DOM 重写，减少了渲染和更新的性能开销，支持更大的应用和更多的组件。
  2. Composition API：这是 Vue 3 的最大亮点，它为开发者提供了更灵活的代码组织方式，使得代码逻辑更易复用和维护。
  3. 基于 Proxy 的响应式系统：Vue 3 使用 Proxy 替代 Object.defineProperty 实现响应式数据，从而支持对数组和对象的更好监控，提升性能和兼容性。
  4. Tree-shaking：Vue 3 默认支持 Tree-shaking，这意味着未使用的代码不会被打包，从而减小了最终打包文件的体积。
  5. Fragments：Vue 3 允许组件返回多个根节点，避免了 Vue 2 中强制要求的单根节点限制。
  6. Teleport：允许开发者将某些组件渲染到 DOM 树中的其他位置，比如将弹窗渲染到 body 下。

10. Vue 的事件处理与修饰符

(1) Vue 中事件修饰符的作用是什么？

问：Vue 中有哪些常见的事件修饰符？它们分别有什么作用？

答：Vue 提供了一系列事件修饰符，用来增强事件处理的能力，常见的修饰符包括：

  1. .stop：调用 event.stopPropagation()，阻止事件冒泡。
  2. .prevent：调用 event.preventDefault()，阻止默认事件。
  3. .self：只有事件来自于目标元素本身时才触发事件。
  4. .once：事件只会触发一次。
  5. .capture：在捕获阶段触发事件。
  6. .passive：以 passive 模式添加事件监听器，提升滚动事件性能。

面试技巧：回答时，可以结合实际项目场景说明事件修饰符的使用。例如，v-on:click.stop 常用于防止点击事件冒泡，特别是在嵌套的组件或列表中。

11. Vue 中的表单处理

(1) 如何在 Vue 中处理表单数据？

问：Vue 如何进行表单输入的双向数据绑定？v-model 是如何工作的？

答：Vue 中的表单数据处理依赖于 v-model 指令，它为表单元素提供了双向数据绑定的功能。通过 v-model，开发者可以轻松地将表单数据与 Vue 实例的 data 属性进行绑定。

  • 原理：v-model 实际上是 value 属性和 input 事件的语法糖。当用户修改表单值时，Vue 会监听 input 事件并自动更新绑定的数据。

  • 不同表单元素的处理：

    • 对于 文本输入框 (input)，v-model 绑定 value 和 input 事件。
    • 对于 复选框 (checkbox)，它可以将布尔值或数组与 v-model 绑定。
    • 对于 单选框 (radio) 和 下拉选择框 (select)，它们会将选中的值与 v-model 绑定。

问：如何实现自定义组件的 v-model 支持？

答：要在自定义组件中支持 v-model，需要在组件中手动实现 value 属性和 input 事件的绑定。以下是步骤：

  1. 声明 props：在组件中通过 props 接收外部传递的 value 属性。
  2. 触发 input 事件：当数据发生变化时，通过 $emit 触发 input 事件将新值发送给父组件。
export default {props: ['value'],methods: {updateValue(newValue) {this.$emit('input', newValue);}}
}

12. Vue 动画与过渡

(1) 如何在 Vue 中实现组件的过渡效果？

问：Vue 中的过渡效果如何实现？

答：Vue 提供了内置的 <transition> 和 <transition-group> 组件，用于为元素或组件的进入和离开添加过渡效果。

  • <transition>：用于为单个元素或组件添加过渡效果。
  • <transition-group>：用于为列表中的多个元素添加过渡效果。

过渡效果的实现步骤：

  1. 使用 <transition> 包裹元素：
    <transition name="fade"><div v-if="show">Hello World</div>
</transition>
  2. 定义过渡的 CSS 样式：Vue 通过添加 CSS 类来控制过渡动画，分别有 v-enter、v-enter-active、v-leave、v-leave-active 等类名。
    .fade-enter-active, .fade-leave-active {transition: opacity 1s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}

问：如何实现 JavaScript 控制的过渡效果？

答：除了通过 CSS 实现过渡，Vue 还支持通过 JavaScript 钩子函数控制过渡。可以在 <transition> 组件中使用钩子函数如 before-enter、enter、leave 来控制过渡效果。

13. Vue 组件复用

(1) 如何在 Vue 中实现组件的复用？

问：Vue 中有哪些实现组件复用的方式？

答：Vue 支持多种方式来实现组件的复用：

  1. 组件组合：通过父子组件组合来实现复用，将逻辑划分为更小的组件，以便在不同场景下重复使用。
  2. 插槽（Slots）：插槽允许父组件向子组件传递结构化内容，v-slot 是 Vue 3 中的统一插槽语法。插槽有默认插槽和具名插槽，具名插槽允许传递多个不同位置的内容。
  3. Mixin：Mixin 是一种复用组件逻辑的方式，允许在多个组件之间共享通用的功能。通过定义 Mixin 并在组件中引入，可以复用特定的行为逻辑。不过，Mixin 可能带来命名冲突，使用时要注意。
  4. 自定义指令：通过自定义指令，可以为多个组件或元素复用某些行为逻辑，例如点击外部关闭等功能。
  5. 高阶组件（HOC）：高阶组件是一种工厂函数，接收一个组件作为参数并返回一个增强后的组件，通常用于逻辑复用。

14. Vue 与 TypeScript

(1) Vue 如何与 TypeScript 结合使用？

问：Vue 项目中如何集成 TypeScript？

答：Vue 3 对 TypeScript 的支持非常友好，官方提供了 Vue CLI 和 Vite 这两种构建工具，均可以方便地集成 TypeScript。使用 TypeScript 可以增强类型检查和代码提示，避免常见的类型错误。

  • 集成步骤：
    1. 创建项目时选择 TypeScript 模板。
    2. 在组件中使用 defineComponent 声明组件。
    3. 使用 interface 或 type 定义组件的 props 和 data 的类型。
    4. 使用 ref 和 reactive 时，需要指定类型，确保响应式数据的类型安全。
import { defineComponent, ref } from 'vue';export default defineComponent({setup() {const count = ref<number>(0);return { count };}
});

问：如何在 Vue 中处理复杂的类型问题？

答：对于复杂类型的处理，可以借助 TypeScript 提供的泛型、类型推断等高级特性，确保组件在传递 props、返回数据时的类型安全。例如，使用 PropType 显式声明 props 的类型，防止类型推断错误。

这些面试题涵盖了 Vue 的重要知识点，如生命周期、组件复用、事件处理和 Vue 3 新特性等。在回答这些问题时，不仅要清晰表达，也要结合自己的项目经验，展示实际应用。

准备面试时的注意事项：

  1. 理解概念：确保对每个概念都有深刻的理解，能够清晰解释它们的用途和工作原理。

  2. 实际应用：结合自己之前的项目经历，准备相关实例。这不仅能让面试官更直观地理解你的能力，也能证明你在实际项目中对这些概念的运用。

  3. 练习口头表达：通过模拟面试，练习你的回答。确保你的回答逻辑清晰、语言流畅，能有效地传达你的思路。

  4. 关注最新动态：保持对 Vue 及前端技术生态的关注，了解最新的更新和最佳实践。这可以通过阅读官方文档、参与社区讨论或观看相关视频等方式实现。

  5. 编写代码示例：在面试过程中，可能会要求你现场编码。因此，熟悉 Vue 的基本语法和常用模式，以便在需要时迅速编写出有效的代码。

总结：

准备 Vue 相关的面试时，涵盖基础知识和高级特性是至关重要的。通过系统地梳理常见面试题及其详细回答，可以帮助你在面试中展现出色的专业素养和丰富的项目经验。希望这些内容能为你的面试准备提供帮助，助你在 2024 年的前端面试中脱颖而出！

面试篇：（一）基础-2024 年前端面试技巧与面试题汇总

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/56474.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

南京邮电大学电工电子A实验十一（数据选择器及逻辑电路的动态测试）

南京邮电大学电工电子A实验十一（数据选择器及逻辑电路的动态测试）

文章目录 一、实验报告预览二、Word版本报告下载 一、实验报告预览 二、Word版本报告下载 点我
阅读更多...
2.Java--入门程序

2.Java--入门程序

一、开发Java程序 步骤&#xff1a; 1.编写代码 其中第一行的HelloWorld叫类名&#xff0c;下面的框架叫main()方法&#xff0c; 类名要和文件名一致&#xff0c; 2.编译代码 用Javac进行编译&#xff0c;将编写的代码保存之后&#xff0c;打开WindowsR输入cmd 用cd文件夹…
阅读更多...
rom定制系列------小米6x_澎湃os1.0.28安卓13定制固件修改 刷写过程与界面预览

rom定制系列------小米6x_澎湃os1.0.28安卓13定制固件修改 刷写过程与界面预览

&#x1f49d;&#x1f49d;&#x1f49d; 在接待很多定制化系统过程中。小米6x机型为很多工作室客户使用。但官方低版本固件无法适应新应用的使用。有些第三方固件却可以完美解决。此固件是客户分享的卡刷固件。需要修改为可以批量刷写的线刷固件。去除一些内置应用。需要自带…
阅读更多...
Spring使用注解进行依赖注入

Spring使用注解进行依赖注入

一、原则 不要把选择留给Spring 二、Autowired&#xff08;Spring注解&#xff09; 流程图&#xff1a; Spring依赖注入-Autowired 截图&#xff1a; 三、Resource&#xff08;JDK注解&#xff09; 流程图&#xff1a; Spring依赖注入-Resource 截图&#xff1a;
阅读更多...
Docker-Harbor概述及构建

Docker-Harbor概述及构建

文章目录 一、Docker Harbor概述1.Harbor的特性2.Harbor的构成 二、搭建本地私有仓库三、部署 Docker-Harbor 服务四、在其他客户端上传镜像五、维护管理Harbor 一、Docker Harbor概述 Harbor 是 VMware 公司开源的企业级 Docker Registry 项目&#xff0c;其目标是帮助用户迅…
阅读更多...
LLM - 使用 Neo4j 可视化 GraphRAG 构建的 知识图谱(KG) 教程

LLM - 使用 Neo4j 可视化 GraphRAG 构建的 知识图谱(KG) 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142938982 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 Neo4j …
阅读更多...
MySql的redo log

MySql的redo log

文章目录 什么是redo logredo log 组成数据更新流程两阶段提交binlog为什么要两阶段提交结语 数据库事务的4个特性之一的持久性是数据库保证数据一致性的关键&#xff0c;mysql为了确保事务在系统崩溃后也能恢复&#xff0c;引入了redo log 重做日志这一机制。 什么是redo log…
阅读更多...
2024前端面试题大全

2024前端面试题大全

2024前端面试题大全涵盖了多个方面&#xff0c;包括HTML、CSS、JavaScript、Vue、React等前端技术。‌ HTML和CSS面试题 ‌HTML5新特性‌&#xff1a;包括绘画canvas、媒体回放元素video和audio、本地离线存储localStorage和sessionStorage、语义化更好的内容元素如article、…
阅读更多...
大厂面试真题-说说jdk1.7和1.8的hashmap的区别以及各自的问题

大厂面试真题-说说jdk1.7和1.8的hashmap的区别以及各自的问题

JDK 1.7和JDK 1.8中的HashMap存在显著的区别&#xff0c;并且各自存在一些问题。以下是对两者的详细对比及问题分析&#xff1a; 一、区别 底层数据结构&#xff1a; JDK 1.7&#xff1a;HashMap的底层结构是由数组&#xff08;也被称为“位桶”&#xff09;和链表构成。当has…
阅读更多...
向日葵下载教程以及三款远程控制工具推荐！！！

向日葵下载教程以及三款远程控制工具推荐！！！

向日葵远程控制下载教程&#xff01;&#xff01; 亲爱的朋友们&#xff0c;如果你对远程控制软件有所需求&#xff0c;那么向日葵绝对是一个不错的选择。现在我将带你走一遍向日葵的下载流程。 1. 打开你的浏览器&#xff0c;输入“向日葵官方网站”&#xff0c;进入官方网站…
阅读更多...
presence_of_element_located() takes 1 positional argument but 2 were given

presence_of_element_located() takes 1 positional argument but 2 were given

错误提示是 TypeError: presence_of_element_located() takes 1 positional argument but 2 were given&#xff0c;这表明 presence_of_element_located 期望接收一个参数&#xff0c;但传递了两个。 问题原因 在 selenium.webdriver.support.expected_conditions 中&#xf…
阅读更多...
线性回归逻辑回归-笔记

线性回归逻辑回归-笔记

一、线性回归&#xff08;Linear Regression&#xff09; 1. 定义 线性回归是一种用于回归问题的算法&#xff0c;旨在找到输入特征与输出值之间的线性关系。它试图通过拟合一条直线来最小化预测值与真实值之间的误差。 2. 模型表示 线性回归模型假设目标变量&#xff08;输…
阅读更多...
【黑苹果】记录MacOS升级Sonoma的过程

【黑苹果】记录MacOS升级Sonoma的过程

【黑苹果】记录MacOS升级Sonoma的过程 一、硬件二、提前说明三、准备OC四、选择驱动五、选择ACPI六、下载内核扩展七、其他问题 一、硬件 设备是神舟zx6-ct5da 具体参照下图 二、提前说明 本机器已经安装过 macOS Monterey 12.6&#xff0c;这次是升级到 macOS Sonoma 14。 …
阅读更多...
测试教程分享

测试教程分享

前几年在腾讯课堂上发布了不少课程&#xff0c;后来腾讯课堂改革&#xff0c;要收会员费&#xff0c;课程还要抽提程&#xff0c;这么下来就相当于白干了。就放弃了在上面发课程&#xff0c;再后来腾讯课堂就关闭了&#xff0c;以前发布的视频就没有地方发了&#xff0c;于是我…
阅读更多...
火车头采集器易优cms采集发布模块下载

火车头采集器易优cms采集发布模块下载

火车头采集器发布数据到易优cms&#xff08;Eyoucms&#xff09;的详细流程&#xff1a; 1. 火车头采集器易优cms&#xff08;Eyoucms&#xff09;发布模块下载地址&#xff1a; 火车头Eyoucms发布模块插件下载-CSDN 2. 在火车头导入下载的易优cms采集发布模块&#xff1b; …
阅读更多...
uniapp学习（003-2 vue3学习 Part.2）

uniapp学习（003-2 vue3学习 Part.2）

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战&#xff0c;开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第15p-第p20的内容 文章目录 事件监听以及组件内置事件处理自定义模板快速创建uniapp条件渲染 v-if和v-elsev-e…
阅读更多...
一分钟带你认清Java抽象类

一分钟带你认清Java抽象类

abstrat——抽象&#xff0c;抽象类真的有像它的名字一样那么抽象吗&#xff1f;其实不然&#xff0c;它只是一个比较特殊的类别&#xff0c;我们只需要简单地认清它的作用就行&#xff0c;一起来看看吧~ 抽象类的概念 首先我们要明确一个事情&#xff1a;在面向对象的概念中&…
阅读更多...
spring boot 项目配置文件

spring boot 项目配置文件

第一种properties文件&#xff08;自带基础&#xff09; 新建项目是会在resources目录下默认properties文件 第二种yml文件&#xff08;常用&#xff09; 格式类型&#xff1a;spring boot支持3种配置文件&#xff0c;分别是xx.properties,xx.yaml,xx.yml;同一个项目若配置这3种…
阅读更多...
2024软考网络工程师笔记 - 第4章.局域网和城域网

2024软考网络工程师笔记 - 第4章.局域网和城域网

文章目录 局域网基础1️⃣局域网和城域网体系架构 IEEE&#xff08;负责链路层&#xff09;2️⃣局域网拓扑结构 &#x1f551;CSMA/CD1️⃣CSMA/CD2️⃣CSMA/CD三种监听算法3️⃣冲突检测原理 &#x1f552;二进制指数退避算法1️⃣ 二进制指数退避算法 &#x1f553;最小帧长…
阅读更多...
【JavaScript】LeetCode：71-75

【JavaScript】LeetCode：71-75

文章目录 71 搜索插入位置72 搜索二维矩阵73 在排序数组中查找元素的第一个和最后一个位置74 搜索旋转排序数组75 寻找旋转排序数组中的最小值 71 搜索插入位置 二分查找在最后一轮比较中&#xff0c;mid所指向的值 > target&#xff0c;right往左收&#xff0c;此时left所指…
阅读更多...
最新文章

Copyright @ 2022~2023