Turboyiyi的博客

原创 mobx的简单介绍-附代码-通俗易懂

MobX 是一个用于在 JavaScript 应用里管理状态的库，它能够简化状态管理，让代码更易维护和理解。

原创 react context 跨组件层级传递数据

在 React 里，Context 是一种能跨组件层级传递数据的方式，无需在每个层级都手动传递 props。下面是一个简单示例，展示了怎样用 React Context 跨组件层级传递数据。

原创 自古能成大事者，必须要沉得住气

原创 李鲆《习惯逆袭》摘抄

原创 vue3里面的 reactive 和ref 有什么区别

reactive定义reactive用于创建响应式对象，它基于 JavaScript 的 Proxy 实现，可以将一个普通的 JavaScript 对象转换为响应式对象，使得对象的属性变化可以被 Vue 检测到并触发相应的更新。使用场景：当需要创建一个包含多个属性的响应式对象时，使用reactive是比较合适的，例如表单数据、状态对象等。ref定义ref用于创建一个响应式的引用，它可以包裹任何类型的值，包括基本数据类型（如numberstringboolean等）和对象。ref。

原创 使用reactive和effect来模拟计算属性

reactive和effect来模拟计算属性

原创 除了表单验证，reactive和effect还可以应用于哪些场景？

在 Vue 3 中，reactive和effect。

原创 Vue 3 中使用 reactive 和 effect 来实现表单验证

reactive 和 effect 来实现表单验证

原创 vue3实现effect & reactive & 依赖收集 &触发依赖

effect & reactive & 依赖收集 &触发依赖

原创 vue3实现effect的scheduler功能

为了实现effect的scheduler功能，我们需要模拟 Vue 3 响应式系统的核心机制。

原创 vue3里面的effect的scheduler功能是干啥的？

scheduler是一个函数，当响应式数据发生变化时，原本默认情况下effect函数会立即重新执行，但如果为effect提供了scheduler选项，那么在响应式数据变化时，Vue 不会立即重新执行effect函数，而是会调用scheduler函数。这就允许你自定义副作用重新执行的时机和方式。

原创 vue3 reactivity 的核心流程

Vue 3reactivity的核心流程可以概括为：通过reactive函数创建响应式对象，使用effect函数创建副作用函数，在副作用函数执行过程中进行依赖收集，当响应式对象的属性发生变化时触发更新，通知所有依赖该属性的副作用函数重新执行。这样就实现了数据的响应式更新。

原创 表格里面有个下拉框，新建一行，下拉框的值去除之前选中的

通过以上代码，你可以实现一个包含四列表头下拉框和第五列新建行按钮的表格，并且新行的下拉框选项会去除之前已选中的值。

原创 修改后端返回的数据：对象，修改成数组，每个是 键值对

能够正确迭代并显示，你需要将这个对象转换成一个数组，每个数组元素都是一个包含。是一个简单的键值对对象，而不是一个数组，其中每个对象都有。

原创 接口有数据，但是表格只渲染表头，表格无数据

问题：现在接口1 有数据，点击按钮调接口2，有数据，表格才显示，但是已刷新页面，页面就没数据了。前提:vue2 element-ui table表格 前四列渲染接口1 后两列渲染接口2。原因：接口2的数据没有取不到，是个underfined,影响了整个表格页面的渲染。如果上述所有条件都满足，说明。

原创 vue2，爷爷(儿子(孙子))，三层级组件嵌套，孙子数据更新，如何通知爷爷

需求：v现在有三个组件，爷爷，儿子，孙子。现在爷爷嵌套着儿子，儿子嵌套着孙子。现在孙子组件的数据更新了，要通知给爷爷组件，如何传递？由于 Vue 2 遵循单向数据流，不推荐直接从孙子组件向爷爷组件传递数据，常见的做法有以下两种：通过事件层层传递和使用事件总线。

原创 vue-select 实现select默认选中第一个

【代码】vue-select 实现select默认选中第一个。

原创 el-row实现根据不同分辨率调整布局

ElementUI的el-row组件本身不会自动根据分辨率进行缩放，但可以结合其提供的栅格系统和响应式布局特性来实现根据不同分辨率调整布局。

原创 根据数组的长度 动态显示对应：某某会员信息：正常or错误

问题描述：后台数据是：{"info": { "select": 0, "status": [ 2, 2, 2 ] }对应页面是：要求1：info.status[0]有值，对应主会员状态，info.status[1]有值，对应二会员状态，info.status[1]有值，对应三会员状态.要求2：值为2，状态为正常；值为0，状态为不正常要实现根据数组的长度动态显示对应的会员信息，你可以在 peopleStatuses计算属性中根据的长度来截取 peoples数组。

原创 vue 根据数组中每个对象的某个变量，动态生成radio按钮

为了实现根据inputs数组中的idx属性动态生成 radio 按钮的需求，我们可以利用 Vue.js 的指令和计算属性来简化这一过程。下面是一个示例代码，展示了如何根据inputs数组中的idx属性动态生成 radio 按钮。

原创 vue-table-expand 多行表格折叠展开，每行显示内容不同，后续接口更新数据会覆盖之前数据。

问题：我的表格有两行数据，两行数据都展开后，第一行折叠的数据会被第二行新调的折叠数据所覆盖，我现在想根据每一行的row.encoder_id，去渲染自己的数据分析解决：由于表格的展开行共享同一个dataLoaded和数据对象（如bufsdevs），当展开第二行时，第一行的数据会被覆盖。为了避免这种情况，需要为每一行维护独立的数据状态。：可以使用一个对象或Map来存储每行的数据状态和数据。：根据来更新和读取相应的数据。。

原创 vue-table-expand折叠打开，每三秒调用一次接口

当行折叠时，我们清除这个定时器。这样就能确保只有在行展开时才会定期调用接口。当行展开时，我们启动一个定时器，每三秒调用一次。同时，你需要在行折叠时清除这个定时器。做法分析：在这个修改后的代码中，我们增加了一个。思路分析：要实现每三秒调用一次。接口，当行展开时，你可以使用。

原创 el-table表格前几行遍历数组，最后一行遍历对象，且最后一行表头少几个

对于最后一行的自定义列，我们通过v-if指令来控制其显示与否，并在其中自定义了显示内容。这样，我们就可以实现前几行遍历数组arr1，最后一行遍历对象obj1，并且最后一行的表头数量少于前几行的效果。需求：现在有el-table表格，表格的前几行是遍历数组arr1,最后一行是遍历对象obj1，并且最后一行比前几行少几个表头。思路：首先定义了一个columns数组来描述表头信息，然后使用v-for指令遍历这个数组来生成表格的前几列。

原创 根据后端返回的“1234”，前端换成“主二三四”

前端一个表格输入框，取值是scope.row.idx，后端返回的idx 是“1234”，要求页面对应显示“主二三四”转换为相应的“城市”名称。然后在模板中调用这个方法来显示“城市”名称。为 2 时，会显示“二“城市””；为 1 时，会显示“主城市”；

原创 Element UI的el-table组件时, 外部表格的数据更新导致内部折叠行强制关闭

el-table外面展示内容调的接口1，折叠里面的数据调接口2,。现在接口1每3.5秒刷新一次表格，接口2只有展开折叠才调用，并且希望实现：折叠展开后，不受接口1的刷新影响关闭。@expand-change="handleExpandChange" --点击折叠展开事件。创建一个expends数组，用于存储展开的keys。由关闭变展开时，将该行的下标存放进去。由展开变关闭时，将该行的下标删除。el-table新增。

原创 前端问题：分页器，父子组件之间的通信传值

要实现点击分页时，将当前页码传递给父组件并重新获取日志数据，需要在子组件的。首先，确保父组件有一个方法可以处理页码变化并重新获取数据。事件，并在该事件触发时调用父组件的方法来更新页码和重新获取数据。同时，确保传递了正确的。在父组件中，需要监听这个自定义事件。这样，当点击分页组件中的不同页码时，方法会被调用，并且会更新。方法以获取新的日志数据。

原创 前端问题梳理1

问题描述：页面展示：前端组件对话框el-dialog里面放了一个表格table,表格里面放了一个折叠el-collapse，折叠打开后里面有一个Button按钮，现在table的渲染数据，是接口一次秒调用一次。问题总结：在点击按钮时折叠面板不会关闭，并且数据渲染不会影响折叠面板的状态。

原创 前端遍历打印

【代码】前端遍历打印。

原创 数组中有多个id对象form，删除指定的id,只剩下没删id的数组

这个方法会创建一个新的数组，包含所有不满足指定条件的元素。在你的情况下，你需要保留那些。对象，你可以使用 JavaScript 的数组方法。不等于你要删除的那个。

原创 在Vue组件中，你传递了一个名为“xxx“的prop，其类型应该是字符串（String），但你实际传递的值是一个数字（Number）。

找到xxx 和 yyy这些报错关键变量，使用 JavaScript 的。比如：:xxx="String(item.qqq)"函数将数字转换为字符串。

原创 在俩数组中查找相同项，把2数组中的值赋值给1数组

【代码】在俩数组中查找相同项，把2数组中的值赋值给1数组。

原创 leetcode1649. 通过指令创建有序数组

​​​​​插入 2 ，代价为 min(1, 4) = 1 ，现在 nums = [1,2,2,3,3,3,4]。插入 2 ，代价为 min(2, 4) = 2 ，现在 nums = [1,1,2,2,2,3,3,3,4]。插入 1 ，代价为 min(0, 6) = 0 ，现在 nums = [1,1,2,2,3,3,3,4]。插入 4 ，代价为 min(5, 0) = 0 ，现在 nums = [1,2,3,3,3,4]。

原创 leetcode 740. 删除并获得点数

之后，再次删除 3 获得 3 个点数，再次删除 3 获得 3 个点数。删除 3 获得 3 个点数，接着要删除两个 2 和 4。之后，删除 2 获得 2 个点数。总共获得 6 个点数。删除 4 获得 4 个点数，因此 3 也被删除。返回你能通过这些操作获得的最大点数。，你可以对它进行一些操作。每次操作中，选择任意一个。总共获得 9 个点数。

原创 leetcode1004. 最大连续1的个数 III

粗体数字从 0 翻转到 1，最长的子数组长度为 10。粗体数字从 0 翻转到 1，最长的子数组长度为 6。

原创 leetcode1477. 找两个和为目标值且不重叠的子数组

尽管我们有 3 个互不重叠的子数组和为 7 （[7], [3,4] 和 [7]），但我们会选择第一个和第三个子数组，因为它们的长度和 2 是最小值。注意子数组 [1,2] 和 [2,1] 不能成为一个方案因为它们重叠了。只有两个子数组和为 3 （[3] 和 [3]）。它们的长度和为 2。请返回满足要求的最小长度和，如果无法找到这样的两个子数组，请返回。可能会有多种方案，请你返回满足要求的两个子数组长度和的。我们只有一个和为 6 的子数组。我们无法找到和为 3 的子数组。

原创 leetcode457. 环形数组是否存在循环

我们可以看到存在循环，按下标 0 --> 1 --> 0 --> ...，当它的大小大于 1 时，它有一个向前跳的节点和一个向后跳的节点，所以。我们可以看到存在循环，按下标 0 -> 2 -> 3 -> 0 --> ...，并且其中的所有节点都是白色（以相同方向跳跃）。我们可以看到存在循环，按下标 3 --> 4 --> 3 --> ...，并且其中的所有节点都是白色（以相同方向跳跃）。的，所以可以假设从最后一个元素向前移动一步会到达第一个元素，而第一个元素向后移动一步会到达最后一个元素。

原创 leetcode914. 卡牌分组

可行的分组是 [1,1]，[2,2]，[3,3]，[4,4]给定一副牌，每张牌上都写着一个整数。此时，你需要选定一个数字。没有满足要求的分组。

原创 leetcode2001. 可互换矩形的组数

矩形 2 和矩形 3 ：10/20 == 15/30。- 矩形 0 和矩形 2 ：4/8 == 10/20。- 矩形 0 和矩形 3 ：4/8 == 15/30。- 矩形 1 和矩形 2 ：3/6 == 10/20。- 矩形 1 和矩形 3 ：3/6 == 15/30。（使用实数除法而非整数除法），则认为这两个矩形。- 矩形 0 和矩形 1 ：4/8 == 3/6。）的宽高比相同，则认为这两个矩形。更规范的说法是，两个矩形满足。不存在成对的可互换矩形。个矩形的宽度和高度。

原创 leetcode283. 移动零

移动到数组的末尾，同时保持非零元素的相对顺序。，必须在不复制数组的情况下原地对数组进行操作。你能尽量减少完成的操作次数吗？，编写一个函数将所有。

原创 leetcode1585. 检查字符串是否可以通过排序子字符串得到另一个字符串

比方说，对下划线所示的子字符串进行操作可以由。2" （从下标 2 到下标 3）-> "84。52" （从下标 0 到下标 2） -> "，请你通过若干次以下操作将字符串。定义为一个字符串中连续的若干字符。