面试官：你的递归组件也是静态的？

最新推荐文章于 2024-10-15 15:24:52 发布
最新推荐文章于 2024-10-15 15:24:52 发布
阅读量205 收藏
点赞数 4
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanpeople/article/details/138571935
版权

递归组件

这一次的灵感来源是在 代码评审上面 发现有一个同事的 树状结构居然是使用静态写的 于是就有了这一篇文章

需要实现的需求

难度不大，单单是讲解实现的思路

通过主页面的数据传值给封装好的递归组件 从而来实现这个效果

大体需要实现的效果，如图

image.png

主页面代码

模拟一下业务传值 首先是主页面

image.png

data 里面的数据通过AI生成 伪装为业务数据

image.png

递归组件代码

代码如下

image.png

基本就是一个循环 加上一个判断 其中有个知识点就是 组件可以引用自己来实现 递归的效果

实现效果如下

可以说是非常简单了

image.png

lanpeople
关注
面试官：说说你对双向绑定的理解?
iygxv
01-11 3054
故心故心故心故心小故冲啊 文章目录一、什么是双向绑定二、双向绑定的原理是什么三、实现双向绑定实现编译Compile依赖收集实现思路参考文献 一、什么是双向绑定 我们先从单向绑定切入 单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新 双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定 举个栗子 当用户填写表单时，View的状态就被更新了，如果此时可以自动更新M.
面试官：你负责项目的时候遇到了哪些比较棘手的问题?怎么解决的
LoveSummer
04-16 4795
为了解决接口幂等性的问题，我们采取了以下步骤：首先，我们重新梳理了现有的接口调用流程，明确了哪些接口需要保证幂等性。为了解决 CPU 使用率过高的问题，我们采取了一系列调优措施：首先，我们对存在性能瓶颈的模块进行了代码审查，寻找可能的优化点。在我负责的一个电商项目中，随着业务的发展和用户量的增长，数据库查询性能逐渐下降，特别是在高峰期，部分关键业务功能的响应时间明显延长，严重影响了用户体验。同时，我们也建立了一套完善的性能监控和预警机制，能够及时发现并解决潜在的性能问题，确保系统的稳定运行。
面试官：【webpack和vite的区别?vite一定比webpack快吗?vite的缺点是什么?webpack的热更新和vite的热更新区别？】
努力的鋜
11-14 757
webpack和vite的区别?vite一定比webpack快吗?vite的缺点是什么?webpack的热更新和vite的热更新区别？webpack是用的node.js来实现的，node.js支持的生态库更多，前后端的一致性比较高，对于异步编程有着很好的支持，node.js的跨平台性比较好，在window，Mac,和linux等不同操作系统上都可以运行
面试官：Vue3.0的设计目标是什么？做了哪些优化?
weixin_44475093的博客
01-25 524
一、设计目标不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下Vue3之前我们或许会面临的问题随着功能的增长，复杂组件的代码变得越来越难以维护缺少一种比较「干净」的在多个组件之间提...
CoderGuide 程序员面试题库，打造全网最高质量题库 面试必备
weixin_37688821的博客
08-01 509
CoderGuide是一个针对同学们前后端求职面试的开源项目，作为一名互联网/IT从业人员，经常需要搜索一些书籍、面试题等资源，在这个过程中踩过很多坑、浪费过很多时间。欢迎大家 Watch、Star，供各位同学免费使用，永不收费！
CoderGuide 程序员面试题库，打造全网最高质量题库
DreamCoders
08-01 639
CoderGuide是一个针对前后端求职面试的开源项目，作为一名互联网/IT从业人员，经常需要搜索一些书籍、面试题等资源，在这个过程中踩过很多坑、浪费过很多时间。欢迎大家 Watch、Star，供各位同学免费使用，永不收费！
【面试题】1383- 面试官问：Vue3 对比 Vue2 有哪些变化？
pingan8787
07-16 1293
前言希望本篇文章能帮你加深对 Vue 的理解，能信誓旦旦地说自己熟练Vue2/3。除此之外，也希望路过的朋友可以帮助我查漏补缺????。内容混杂用法 + 原理 + 使用小心得，建议收藏，慢慢看。区别生命周期的变化整体来看，变化不大，只是名字大部分需要 + on，功能上类似。使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直接调用，如下所示。//vue...
面试官问：Vue3 对比 Vue2 有哪些变化？
LoveSummer
07-13 2万+
前言希望本篇文章能帮你加深对 Vue 的理解，能信誓旦旦地说自己熟练Vue2/3。内容混杂 + + ，建议收藏，慢慢看。整体来看，变化不大，只是名字大部分需要 + ，功能上类似。使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直接调用，如下所示。 常用生命周期表格如下所示。Tips： 是围绕和生命周期钩子运行的，所以不需要显式地去定义。Vue3 支持了多根节点组件，也就是。Vue2中，编写页面的时候，我们需要去将组件包裹在中，否则报错警告。 Vue3，我们可以组件包含多个根节点，
面试官:vue的这些原理你了解吗?
专注于dreamweaver网页设计制作
08-09 282
努力!奋斗!爱折腾的程序员, 不会没关系, 最重要的是我们一起学习!在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持续整理总结~...
字节面试官：熟悉插件化？通过源码聊聊Android插件化原理
m0_62167422的博客
04-06 574
前言 插件化技术最初源于免安装运行 apk 的想法，这个免安装的 apk 就可以理解为插件，而支持插件的 app 我们一般叫宿主。宿主可以在运行时加载和运行插件，这样便可以将 app 中一些不常用的功能模块做成插件，一方面减小了安装包的大小，另一方面可以实现 app 功能的动态扩展。 插件化的开源框架 插件化发展到现在，已经出现了非常多的框架，下表列出部分框架： 特性 DynamicAPK dynamic- load-apk Small DroidPlugin RePlugin VirtualAPK
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
热门推荐
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
京东Java岗：来自面试官的夺命连环56问，直接当场怀疑人生~
QLCZ0809的博客
05-06 413
前言 今年，从java转到别的行业的人不少，也有不少人挤进这个市场想要分得一杯羹。年复一年，年年如此。当然，Java程序员市场需求依然是比较大的，而且Java岗位晋升方向多，这就为许多人带去了机会。但是另一方面，高级人才紧缺，很多即使是有工作经验的程序员都达不到大厂招聘的要求，对比一下互联网大厂面试真题，看下你离一线大厂还有多少距离！ 全部笔记内容和答案解析都整理成文档了(在文末) 京东一面： 1、遇到过哪些设计模式？ 在学习⼀些框架或中间件的底层源码的时候遇到过⼀些设计模式： **1. 代理模式：**My
20 道 Vue 常见面试题，你会几道？（含答案）
IT博客技术分享
07-09 1643
你觉得自己最擅长的技术栈是什么？ Vue 吧，我很喜欢尤大，最近刚发布了 Vue 的首部纪录片，真的很好看。 1.那你能讲一讲 MVVM 吗？ MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件， ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层
web扩展
x737510的博客
10-10 604
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
前端开发攻略---8种方法实现在浏览器中跨页面通信
最新发布
nibabaoo的博客
10-15 1084
浏览器实现跨标签页通信的多种方式
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 496
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 619
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
基于monaco-editor的web日志组件
暗影刀客的博客
10-12 278
一个基于monaco-editor的web日志组件，支持灵活的扩展配置，支持vue和react
Vue+Vuex 实现动态树形组件：递归组件与Vuex数据管理
本文档详细介绍了如何使用Vue.js和Vuex来开发一个动态且可递归的树形组件（Tree）用于展示中国各级政府的列表。由于实际需求是根据后台大数据动态获取政府网站的文章决策，因此组件设计必须具备以下关键特性： 1. *...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值