每天10个vue面试题(四)

1、简述 mixin、extends 的覆盖逻辑?

  • mixin 和 extends均是用于合并、拓展组件的,两者均通过 mergeOptions 方法实现合并。
  • mixins 接收一个混入对象的数组,其中混入对象可以像正常的实例对象一样包含实例选项,这些选项会被合并到最终的选项中。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
  • extends 主要是为了便于扩展单文件组件,接收一个对象或构造函数。

2、mergeOptions的执行过程?

  • 规范化选项(normalizeProps、normalizelnject、normalizeDirectives)
  • 对未合并的选项,进行判断
  • 合并处理。根据一个通用 Vue 实例所包含的选项进行分类逐一判断合并,如 props、data、 methods、watch、computed、生命周期等,将合并结果存储在新定义的 options 对象里。
  • 返回合并结果 options。

3、描述下Vue自定义指令?

  • 在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
  • 一般需要对DOM元素进行底层操作时使用,尽量只用来操作 DOM展示,不修改内部的值。当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新;如必须修改可以在自定义指令中使用keydown事件,在vue组件中使用 change事件,回调中修改vue数据

4、自定义指令钩子函数、参数?

  • 全局定义:Vue.directive("focus",{})
  • 局部定义:directives:{focus:{}}
  • 钩子函数:指令定义对象提供钩子函数
  • el:指令所绑定的元素,可以用来直接操作 DOM。
  • binding:一个对象,包含以下 property:
  • name:指令名,不包括 v- 前缀。
  • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
  • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中表达式为 "1 + 1"。
  • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。
  • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

5、自定义指令使用场景?

  • 普通DOM元素进行底层操作的时候,可以使用自定义指令
  • 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。
  • 鼠标聚焦
  • 下拉菜单
  • 相对时间转换
  • 滚动动画

6、Vue子组件可以直接改变父组件的数据吗?

  • 不可以,
  • 因为vue是单向数据流,数据流向从上到下,父级 props的更新向下流动到子组件,但是反过来则不行。这样防止从子组件意外变更父级组件的状态。子组件只能通过$emit派发一个自定义事件,父组件接收到后,由父组件修改。

7、Vue单向数据流?

  • 在Vue中,单向数据流指的是数据从父组件流向子组件的单向过程。这意味着子组件不能直接修改从父组件接收的props数据,只能通过触发事件来通知父组件修改数据。这种数据流的方式是从上至下单向的,有利于数据的可预测性和可维护性。

8、为什么需要单向数据流?

  • 可预测性: 由于数据是单向流动的,因此更容易理解和预测数据的变化。当数据变化时,你只需要关注数据的来源,而不需要追踪数据在多个组件之间的流动。
  • 可维护性: 当数据流动是单向的,组件之间的依赖关系变得更加清晰。这使得代码更容易维护,因为修改一个组件通常只影响其下游组件,而不会影响其他不相关的组件。
  • 简化组件间通信: 通过明确的数据流,开发者可以更容易地管理组件之间的通信。子组件通过事件通知父组件,这使得组件间通信更加明确和简单。
  • 降低出错概率: 双向数据流可能会导致更复杂的错误,因为任何组件都可以修改数据,这可能导致数据的不一致性和不可预测的行为。单向数据流限制了直接修改数据的能力,从而减少了出错的机会。
  • 促进最佳实践: 单向数据流鼓励将状态管理逻辑集中在一个地方(如Vuex),这有助于更好地组织和结构化代码,使得代码更加清晰和容易理解。

9、Vue是如何进行依赖收集的?

  • 依赖收集是 Vue 实现响应式数据的核心。当组件被初始化时,Vue 会对组件的 data 进行初始化,将普通的 js 对象变成响应式对象。通过使用 Object.defineProperty 来实现,将属性转化为 getter/setter,在访问和修改属性时触发依赖收集和更新。
  • 依赖收集的过程,在底层主要涉及到三个类:Dep、Watcher 和 Vue
  • Dep 是依赖收集的核心,它的主要作用是管理所有的 Watcher。Dep 类中有一个静态属性 target,它指向当前正在计算的 Watcher,保证了同一时间全局只有一个 Watcher 被计算。Dep 类中还有一个 subs 属性,它是一个 Watcher 的数组,用来存储所有依赖这个 Dep 的 Watcher。
  • Watcher 是一个用来计算表达式的类。在 Watcher 的构造函数中,它会执行表达式,这个表达式可能会触发数据的 getter,从而进行依赖收集。Watcher 类中还有一个 addDep 方法,它会将当前的 Watcher 添加到 Dep 的 subs 数组中。
  • Vue 类是 Vue 的入口,它的主要作用是初始化 Vue 应用。在 Vue 类的初始化过程中,会对组件的 data 进行初始化,将普通的 JavaScript 对象变成响应式对象。在这个过程中,会进行依赖收集。

10、Vue的优点?

  • 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb ;
  • 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
  • 双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单;
  • 组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单页面应用方面有着独特的优势;
  • 视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
  • 虚拟DOM:dom 操作是非常耗费性能的,不再使用原生的 dom 操作节点,极大解放 dom 操作,但具体操作的还是 dom 不过是换了另一种方式;
  • 运行速度更快:相比较于 react 而言,同样是操作虚拟 dom,就性能而言, vue 存在很大的优

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

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

相关文章

zookeeper全系列学习之分布式锁实现

文章目录 前言一、分布式锁的通用实现思路二、ZK实现分布式锁的思路三、ZK实现分布式锁的编码实现1、核心工具类实现2、测试代码编写线程安全问题复现使用上面封装的ZkLockHelper实现的分布式锁 优点缺点 总结 前言 就像上篇文章zookeeper全系列学习之统一配置获取说的&#x…

Uni-App-02

条件编译 条件编译概念 不同的运行平台终归有些专有的特性,无法实现跨平台完全兼容,例如:微信小程序导航栏右上角的关闭图标。 uni-app提供了一种“条件编译”机制,可以针对特定的平台编译执行特定的代码,否则不执行。…

【ArcGISPro】制作简单的ArcGISPro-AI助手

【python】AI Navigator的使用及搭建本机大模型_anaconda ai navigator-CSDN博客 【Python】AI Navigator对话流式输出_ai大模型流式输出效果(打字效果) python-CSDN博客 【C#】调用本机AI大模型流式返回_怎么实现调用本地大模型时实现流式输出-CSDN博客 【ArcGISPro】宣布推…

springboot 修复 Spring Framework 特定条件下目录遍历漏洞(CVE-2024-38819)

刚解决Spring Framework 特定条件下目录遍历漏洞(CVE-2024-38816)没几天,又来一个新的,真是哭笑不得啊。 springboot 修复 Spring Framework 特定条件下目录遍历漏洞(CVE-2024-38816)https://blog.csdn.ne…

可编辑97页PPT | 制造企业数字化转型战略咨询及IT总体规划方案

荐言分享:制造企业数字化转型是当前市场环境下的必然趋势,旨在通过引入先进的信息技术,优化业务流程,提升运营效率,增强客户体验,实现可持续发展。这一转型过程涉及多个方面,需要综合考虑企业战…

计算机视觉中的点算子:从零开始构建

Hey小伙伴们!今天我们要聊的是一个非常基础但极其重要的计算机视觉技术——点算子(Point Operators)。点算子主要用于对图像的每个像素进行独立的处理,比如亮度调整、对比度增强、灰度化等。通过这些简单的操作,我们可…

001-Kotlin界面开发之Jetpack Compose Desktop学习路径

Compose Desktop学习之路 学习过程 理解Kotlin的基本语法 Compose Desktop采用Kotlin构建,因此对Kotlin的基本语法有很好的理解是必不可少的。你可以从官方的Kotlin文档开始。 用一句话概括,Kotlin是一种现代的、静态类型的编程语言,它结合…

小金标认证的头戴式蓝牙,QCY H3 Pro耳机,平价高音质的新选择

我发现如今市面上百元级的头戴式无线耳机都有非常出色的音质表现了,这其中国产品牌的表现尤为亮眼,与入耳式耳机相比,头戴式耳机拥有更大的发音单元和更包裹耳朵的耳罩设计,提供了更舒适稳固的佩戴体验,在音质和降噪效…

方法+数组

1. 方法 1. 什么是方法 方法定义: // []表示可写可不写[public] [static] type name ( [type formal , type formal , ...]){方法体;[return value ;] }[修饰符] 返回值类型 方法名称([参数类型 形参 , 参数类型 形参 ...]){方法体代码;[return 返回值…

大语言模型(LLM)入门级选手初学教程 II

模型架构 5.1 输入编码: i. 词元序列编码 Input Embedding Module ii. 位置编码(Position Embedding, PE),Transformer 的编码器结构本身无法识别序列中元素的顺序。 𝒙𝑡 𝒗𝑡 &#x1d491…

【深度学习】实验 — 动手实现 GPT【二】:注意力机制、注意力掩码、多头注意力机制

【深度学习】实验 — 动手实现 GPT【二】:注意力机制、多头注意力机制 注意力机制简单示例:单个元素的情况简单示例:计算所有输入词元的注意力权重推广到所有输入序列词元: 注意力掩码代码实现多头注意力测试 注意力机制 简单示例…

数据库(31)——事务

事务 数据库事务(Database Transaction)是数据库管理系统(DBMS)中执行的一组逻辑操作单元,这些操作要么全部成功执行,要么全部不执行,以保持数据的一致性和完整性。事务是确保数据可靠性的重要机…

Android 获取OAID

获取OAID 老规矩,直接上: implementation com.huawei.hms:opendevice:6.11.0.300 // 要获取华为vaid 和aaid,还需添加opendevice 依赖implementation(name: oaid_sdk_2.5.0, ext: aar) import android.content.Context; import android.util.…

每日互动基于 Apache DolphinScheduler 从容应对ClickHouse 大数据入库瓶颈

引言 大家好,我叫张琦,来自每日互动,担任大数据平台架构师。今天我将分享我们团队在基于Apache DolphinScheduler实现ClickHouse零压入库过程中的实践经验。 这个实践项目涉及到两个关键组件:Apache DolphinScheduler和ClickHous…

[vulnhub] Brainpan1

https://www.vulnhub.com/entry/brainpan-1,51/ 主机发现端口扫描 使用nmap扫描网段类存活主机 因为靶机是我最后添加的,所以靶机IP是166 nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-1…

数学建模与优化算法:从基础理论到实际应用

数学建模和优化算法,它们不仅帮助我们理解和描述复杂系统的行为,还能找到系统性能最优化的解决方案。本文将从基础的数学理论出发,逐步深入到各种优化算法,并探讨它们在实际问题中的应用。 思维导图文件可获取:https:…

基于Intel Gaudi AI加速器的大语言模型微调与推理优化赛题等你挑战 | CCF BDCI进行时

一年一度的行业盛事2024 CCF大数据与计算智能大赛(简称2024 CCF BDCI)又在激烈进行中啦! 多个赛题等你挑战还没有报名的伙伴们抓紧时间咯,叫上你伙伴练起来吧! 2024 CCF大数据与计算智能大赛 CCF大数据与计算智能大…

使用 FastGPT 工作流搭建 GitHub Issues 自动总结机器人

如今任何项目开发节奏都很快,及时掌握项目动态是很重要滴,GitHub Issues 一般都是开发者和用户反馈问题的主要渠道。 然而,随着 Issue 数量的增加,及时跟进每一个问题会变得越来越困难。 为了解决这个痛点,我们开发了…

Unreal Engine 5 C++(C#)开发:使用蓝图库实现插件(一)认识和了解Build.cs

目录 引言 一、创建一个C插件TextureReader插件 二、Build.cs文件 三、ModuleRules 四、TextureReader插件的构造 4.1ReadOnlyTargetRules的作用 4.2TextureReaderd的构造调用 4.3设置当前类的预编译头文件的使用模式 4.4PublicIncludePaths.AddRange与PrivateInclude…

探索C嘎嘎:初步接触STL

#1024程序员节|征文# 前言: 在前文小编讲述了模版初阶,其实讲述模版就是为了给讲STL提前铺垫,STL是C中很重要的一部分,各位读者朋友要知道它的份量,下面废话不多说,开始走进STL的世界。 目录&am…