首页 > 其他分享 >前端面试题(20241204)

前端面试题(20241204)

时间:2024-12-04 11:31:46浏览次数:6  
标签:面试题 Vue computed 前端 元素 watch 20241204 组件 数据

1.v-if 和 v-show 的区别?

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁 和重建,操作的实际上是dom元素的创建或销毁。

v-show 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换 它操作的是display:none/block属性。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地 切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

2.vue 内置指令

v-bind 用于响应式地更新 HTML 属性

v-model 在表单输入和应用状态之间创建双向数据绑定

v-if 根据表达式的真假值来条件性地渲染元素

v-else-if 表示 v-if 的“else if”块

v-else 为 v-ifv-else-if 提供“else”块

v-for 基于一个数组来渲染一个列表

v-on 用于监听 DOM 事件,并在触发时执行一些 JavaScript 代码

v-show 根据表达式之真假值,切换元素的 display CSS 属性

v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签

v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

v-once 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

3.怎样理解 Vue 的单项数据流?

在Vue中,单向数据流是指数据的传递方向是单向的,从父组件向子组件进行传递。这意味着只有父组件可以改变数据,而子组件只能通过props接收数据,并且无法直接修改它们。这种单向数据流的设计原则有助于提高代码的可维护性和可预测性。

使用Vue单向数据流的好处:易于追踪数据流动,提高代码的可维护性,易于调试和测试。

4.computed 和 watch 的区别和运用的场景

区别:

  • 功能差异:

    • computed:计算属性,它基于它们的依赖进行缓存。只有当相关依赖发生改变时,才会重新计算。适用于需要基于其他数据计算得出新值的场景。

    • watch:侦听器,它允许你执行异步操作或开销较大的操作,响应数据的变化。当需要监听某个数据的变化,并在数据变化时执行特定的逻辑(如发送请求、调用方法等)时,使用watch。

  • 缓存机制:

    • computed:具有缓存机制,只有当依赖的数据发生变化时,才会重新计算。如果依赖的数据没有变化,多次访问computed属性时会返回缓存的值,从而提高性能。

    • watch:不具备缓存机制,每次数据变化都会执行回调函数,不考虑是否进行了计算或计算的结果是否相同。

  • 执行时机:

    • computed:默认是懒执行的,即只有在需要时才会进行计算。

    • watch:可以设置为在数据变化时立即执行(通过设置immediate: true),或者在组件创建时立即执行一次(同样通过immediate: true,但这通常与监听数据变化的初衷不符,更多是用于初始化)。

  • 使用方式:

    • computed:在组件的computed选项中以键值对的形式定义,键是计算属性的名称,值是一个函数,该函数的返回值就是计算属性的值。

    • watch:在组件的watch选项中以键值对的形式定义,键是需要观察的数据或表达式的名称,值是一个对象或函数,用于定义当数据变化时应该执行的逻辑。

运用场景:

  • computed的运用场景:

    • 数据格式化:如将日期、数字等格式化后展示。

    • 复杂计算:根据多个数据计算出新的数据,如根据商品单价和数量计算出总价。

    • 筛选过滤:根据某些条件筛选数组中的元素。

  • watch的运用场景:

    • 异步操作:如监听输入框的值,当值变化时发送请求获取数据。

    • 数据持久化:监听数据的变化,并在数据变化时保存到本地存储或服务器。

    • 复杂逻辑处理:当数据变化时执行一系列复杂的逻辑操作。

5.Vue 2.0 响应式数据的原理

Vue 使用 Object.defineProperty 劫持对象的属性,为每个属性创建 getter 和 setter。当数据被访问或修改时,会触发相应的 getter/setter,从而进行依赖收集和派发更新。对于数组,Vue 重写了部分方法以确保数组的响应式。当数据变化时,Vue 异步更新 DOM,以提高性能。整个过程基于观察者模式,实现了数据变化时视图的自动更新。

标签:面试题,Vue,computed,前端,元素,watch,20241204,组件,数据
From: https://blog.csdn.net/weixin_58978959/article/details/144233627

相关文章

  • uniapp+家政小程序+源码+(前端&后端)
    普通版本:价格¥1999.00元(首次搭建+一年维护+系统更新)源码版本:价格¥9999.00元(首次搭建+一年维护+系统更新+全套源代码+二次开发技术支持)产品技术栈:Uniapp+Unicloud(阿里云)前后端分离平台构架:客户端(小程序)+家政服务人员端(小程序)+管理后台端(小程序)二次......
  • RabbitMQ26问,基本涵盖了面试官必问的面试题(知识满满!!!)
    目录1.RabbitMQ是什么?2.RabbitMQ特点?3.AMQP是什么?4.AMQP协议3层?5.AMQP模型的几大组件?6.说说生产者Producer和消费者Consumer?7.为什么需要消息队列?8.说说Broker服务节点、Queue队列、Exchange交换器?9.消息队列有什么优缺点10.如何保证消息的可靠性?11.什么是Routi......
  • 家政程序源码(前端+后端)
    产品说明:系统产品经理及开发团队为家政行业从业多年,更了解家政业务场景普通版本:价格¥1999.00元(首次搭建+一年维护+系统更新)源码版本:价格¥9999.00元(首次搭建+一年维护+系统更新+全套源代码+二次开发技术支持)产品技术栈:Uniapp+Unicloud(阿里云)前后端分离平台构......
  • 前端新人初入职场的开发注意项
    边界值的一些展现形态例如一个弹窗或者提示区的内容是通过后端获取的,需要确定获取失败时展示,和待加载时的交互和展示态,必须要让用户在点击按钮时触发loading来知道系统已经进入处理阶段,同时可以在请求返回结果前禁用按钮,否则用户可能会多次进行点击触发多次请求。如果你想写......
  • 前端必须掌握的16道基础算法
    前端必须掌握的16道基础算法如果对各位老师有用,欢迎点赞评论。(#^.^#)1.求字符串中最长无重复字符串长度(求长度和不重复字符串)//第一题答案:求字符串中最长无重复字符串的长度start//Math.max.apply(this,itemNum)调用Math的max方法‘继承’const......
  • 305.大学生HTML5期末大作业 —【摩尔庄园小游戏主题网页】 Web前端网页制作 html5+css
    目录一、更多推荐二、网页简介三、网页文件四、网页效果五、代码展示1.html2.CSS3.JS六、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强一、更多推荐欢迎来到我的CSDN主页!您的支持是我创作的动力!Web前端网页制作、网页完整代码、大学生期末大作......
  • 在自家的代码生成工具中,增加对跨平台WxPython项目的前端代码生成,简直方便的不得了
    在经过长时间对WxPython的深入研究,并对其构建项目有深入的了解,以及完成对基础框架的完整改写后,终于在代码生成工具完全整合了基于Python跨平台方案项目的代码快速生成了,包括基于FastApi的后端WebAPI项目,以及前端的WxPython前端界面项目。本篇随笔主要介绍跨平台WxPython项目的......
  • web前端期末大作业:基于HTML+CSS+JavaScript制作我的音乐网站(带设计报告)
    ......
  • 大模型面试题:目前大模型中的位置编码有哪些?
    我整理了1000道算法面试题,可以在下面的地方获取,面试题还是有点多的在大模型中,位置编码主要分为两大派:绝对位置编码和相对位置编码。主流的几种脍炙人口的位置编码如下所示:正弦编码正弦曲线(Sinusoidal)位置编码:这是Transformer原始论文中提出的位置编码方式。它通过正弦和......
  • 大模型面试题:当Batch Size增大时,学习率该如何随之变化?
    我整理了1000道算法面试题:获取该问题大答案的理论分析请参考苏剑林的科学空间,地址位于https://kexue.fm/archives/10542说下结论:从方差的角度来分析,有两个角度来说明学习率应该和Batchsize的关系,一个是呈现根号的关系,也即Batchsize增大x倍,学习率增大根号x倍,另一个角度是......