IDEA之奇技淫巧篇

本文介绍了如何集成Git,包括配置Git、代码管理,如拉取、提交、切换和合并分支。此外,还详细讲解了debug技巧,如开启debug模式、设置断点条件、代码段调试以及断点编辑。最后,列举了一些常用的IDEA快捷键,提升开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


一、集成Git

1、配置Git


  首先从Git官网下载号 Git 包,下载好了直接安装,一直点下一步就行。

打开IDEA的配置项,Version Ctontrol --> Git,选择安装号的 Git,选择 bin 路径下 git.exe。

在这里插入图片描述

2、代码管理


File --> New --> Project from Version Control 拉取项目。

在这里插入图片描述


拉取和提交代码。

在这里插入图片描述

右下角新建、切换分支。

在这里插入图片描述


比较两个分支的差异。

在这里插入图片描述
在这里插入图片描述

合并代码。

在这里插入图片描述


通过 Cheery-Pick 合并某个提交记录。

在这里插入图片描述

3、代码回退


在这里插入图片描述

Undo Commit 回退 commit 未 push 的代码。比如切分支时代码没写完,可以先 commit 本地暂存代码,后面切回来时 Undo Commit 后继续写,这种不会保留提交记录。

在这里插入图片描述
在这里插入图片描述

Revert Commit 回退 commit (是否 push 无所谓)的代码,这种会保留提交记录。

在这里插入图片描述

Drop Commit 删除 commit 未 push(已 push 的不建议用)的代码,这种不会保留提交记录,连代码都会删掉。

在这里插入图片描述

Reset 版本回退(选择要回退到的某个提交记录,点击 Reset Current Branch to Here)。

在这里插入图片描述

  • Soft 模式,仅仅移动本地库指针,暂存区和本地的代码没有做任何改变。保留所有更改内容和新增文件,代码显示绿色(已 add 未 commit),push 到远程仓库之后不会覆盖之前的提交记录。
  • Mixed 模式,不仅移动了本地库的指针,同时重置暂存区。保留所有更改内容和新增文件,代码显示红色(未 add),push 到远程仓库会覆盖掉之前的提交记录。
  • Hard 模式,版本彻底回退,不仅移动了本地库的指针,同时重置工作区和暂存区。删除所有修改内容和新增文件,push 到远程仓库会覆盖掉之前的提交记录。谨慎使用,比如合代码时合错分支了,代码和合并记录都不想保留。
  • Keep 模式,不仅移动了本地库的指针,同时重置工作区。commit 的丢弃,未 commit 的保留,push 到远程仓库会覆盖掉之前的提交记录。

二、debug技巧

1、开启debug模式


右上角指定项目启动或者直接在启动类里选定debug模式。

在这里插入图片描述

F8 单步跳过,一行一行执行,不进入方法。

在这里插入图片描述

F7 单步跳过,一行一行执行,进入方法。

在这里插入图片描述

F9 整体跳过,直到下一个断点。

在这里插入图片描述

2、添加断点运行的条件


断点处右键选中,添加条件,执行,满足条件才会进入该断点。

在这里插入图片描述
在这里插入图片描述

3、Evaluate Expression 代码段调试


选中要执行的代码右键或者 Alt+F8,点击 Evaluate 执行。

在这里插入图片描述
在这里插入图片描述

输入框的代码可以动态修改。

在这里插入图片描述

3、断点编辑


显示所有断点,进行编辑。

在这里插入图片描述

取消所有断点。

在这里插入图片描述

三、常用快捷键


Ctrl+F,文件内搜索
Ctrl+R,文件内搜索并替换
Ctrl + Shift+F,全局搜索
双击 Shift,全局搜文件
Ctrl+G,查找行
Ctrl+Alt+T,可以把代码包在一块内(try / catch、if / else等等)
Alt + Enter,这个就牛逼了,根据不同的语境提示不同的操作,堪称万能建:

  • 自动导包
  • 实现接口、抽象类和方法
  • equals 和 == 互转
  • 转换 lambda 表达式
  • if / else 和 switch 互转
  • 异常捕获
  • 方法抽离(选中代码块抽出一个单独方法)
  • 语法转换和优化(转换成更简洁高效的代码)
  • 等等等等(功能很强大)
<think>好的,我需要回答用户关于Vue3高级技巧、不常见用法和最佳实践的问题。用户之前提到过引用了一些资料,但那些引用似乎和Vue3关系不大,甚至可能有误导,比如引用[1]提到了快速排序,这明显是算法内容,和Vue无关。不过用户现在明确询问Vue3的高级技巧,所以需要抛开那些不相关的引用,专注于正确的知识点。 首先,我应该回忆Vue3的一些高级特性。比如Composition API的深入使用,响应式系统的底层原理,自定义指令的高级应用,还有组件方面的优化技巧,如递归组件、动态组件、异步组件等。此外,还有一些性能优化的方法,比如使用v-once、v-memo,或者利用Teleport和Suspense组件来优化DOM结构和加载状态。 接下来,需要整理这些知识点,确保准确性和实用性。例如,Composition API中的自定义hook可以封装可复用的逻辑,这可能是一个不常见但实用的技巧。另外,响应式方面,使用shallowRef和markRaw来优化性能,避免不必要的响应式追踪,这也是高级用法之一。 还要考虑到组件通信的高级方法,比如使用provide/inject结合Symbol作为键,确保注入的安全性。另外,模板引用(ref)的动态使用,尤其是在循环或条件渲染中,可能有些用户不太熟悉。 异步组件的懒加载和代码分割也是性能优化的重要部分,可以结合defineAsyncComponent和Webpack的动态导入来实现。Teleport组件用于将子节点渲染到DOM中的其他位置,这在处理模态框或通知时非常有用,但可能被忽视。 另外,自定义指令的高级用法,比如创建防抖点击指令,或者集成第三方库如GSAP,这也是值得提及的。还有,基于Vue3的TypeScript支持,如何利用泛型和类型推断来增强代码的健壮性,可能属于最佳实践的一部分。 需要验证每个技巧的正确性,比如v-memo的使用场景,确保在大型列表中的正确应用。递归组件的使用,需要命名组件的重要性,避免无限循环的问题。动态组件的:is绑定,可能需要结合keep-alive来保持状态。 最后,整理这些内容,分点说明,确保结构清晰,语言简洁,符合用户要求的中文回答,并生成相关问题。检查是否有遗漏的重要技巧,比如渲染函数的JSX用法,或者使用Composition API替代Mixins的优势,这些都是Vue3推荐的最佳实践。</think>### Vue3 高级技巧与不常见用法解析 #### 一、组件深度控制技巧 1. **递归组件命名强制要求** Vue3 要求递归组件必须显式声明 `name` 选项,否则会导致栈溢出: ```javascript export default { name: 'TreeItem', // 必须显式命名 template: `<div><TreeItem v-for="item in children"/></div>` } ``` 2. **动态组件状态保持** 使用 `<KeepAlive>` 包裹动态组件时,配合 `:include` 属性精准控制缓存策略: ```vue <KeepAlive :include="['TabA', 'TabC']]"> <component :is="currentComponent"/> </KeepAlive> ``` #### 二、响应式系统高级用法 1. **非深度响应式控制** 使用 `shallowRef` + `triggerRef` 实现手动触发更新: ```javascript const state = shallowRef({ count: 0 }) // 修改不会自动触发更新 state.value.count++ // 手动触发更新 triggerRef(state) ``` 2. **冻结大型数据集** 通过 `markRaw` 避免不必要响应式追踪: ```javascript const heavyData = markRaw(fetchBigData()) ``` #### 三、模板编译黑科技 1. **v-memo 性能优化** 在大型列表渲染中精准控制更新范围: ```vue <div v-for="item in list" :key="item.id" v-memo="[item.id === selectedId]"> {{ item.content }} </div> ``` 2. **内联模板(SSR场景)** Server Side Render 中特殊用法: ```vue <script type="text/x-template" id="custom-template"> <div>{{ dynamicContent }}</div> </script> ``` #### 四、Composition API 进阶 1. **Effect作用域控制** 使用 `effectScope` 批量管理副作用: ```javascript const scope = effectScope() scope.run(() => { watch(data, () => { /*...*/ }) watchEffect(() => { /*...*/ }) }) // 批量清理 scope.stop() ``` 2. **自定义 Ref 工厂** 创建带校验逻辑的 ref: ```javascript function validatedRef(value, validator) { return customRef((track, trigger) => ({ get() { track(); return value }, set(newVal) { if (validator(newVal)) { value = newVal trigger() } } })) } ``` #### 五、渲染函数妙用 1. **JSX 片段加速开发** 结合 TypeScript 的类型推断: ```tsx render() { return (<> <NavBar/> <main>{this.content}</main> </>) } ``` 2. **动态插槽生成器** 使用 `h()` 函数创建动态插槽内容: ```javascript render() { return h(MyComponent, {}, { default: () => [h('div', this.dynamicContent)] }) } ``` #### 六、性能优化实践 1. **组件懒加载策略** 配合 Suspense 实现分段加载: ```javascript const HeavyComponent = defineAsyncComponent({ loader: () => import('./Heavy.vue'), timeout: 3000, suspensible: true }) ``` 2. **Web Worker 集成** 通过 `worker-plugin` 实现 CPU 密集型任务分流: ```javascript const worker = new ComlinkWorker(new URL('./worker.js', import.meta.url)) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

砍光二叉树

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值