vue常见**MS题

1.Vue中key值作用

高逼格答案: 提升 vue渲染性能
  • 1.vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比, 如果dom结构一致,则vue会复用旧的dom。 (此时可能造成数据渲染异常)
  • 2.使用key可以给dom添加一个 唯一标识符,让vue强制更新dom

2.vue组件传值

父传子

  • 1.子组件props定义变量
  • 2.父组件在使用子组件时通过行内属性给props变量传值
  • 特点:单向数据流

子传父

  • 1.子组件:$emit触发父的事件
  • 2.父在使用组件用@自定义事件名=父的方法 (子把值带出来)
  • 特点:事件监听

非父子组件

  • vuex

3.==【必问】==vue生命周期总共分为几个阶段?

核心: 四个阶段8个勾子

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

1)beforeCreate**

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2)created**

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

3)beforeMount**

在挂载开始之前被调用:相关的 render 函数首次被调用。

4)mounted**

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

5)beforeUpdate**

数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。

6)updated**

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

7)activated**

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8)deactivated**

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9)beforeDestroy**

实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10)destroyed**

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11)errorCaptured(2.5.0+ 新增)**

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

4.==【必问】==第一次加载页面会触发哪几个钩子函数?

  • 四个钩子
    • beforeCreate,
    • created,
    • beforeMount,
    • mounted 这几个钩子函数

5.【必问】Vue的路由实现模式:hash模式和history模式

1.路径不同
hash有#, history没有#
2.工作模式不同
hash : 修改当前页面hash,不需要服务器额外配置
history: 会给服务器发送请求,需要服务器配置
  • 1.hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用 window.location.hash 读取。特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
  • 2.history模式:history采用HTML5的新特性;且提供了两个新方法: pushState(), replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更

6.【必问】请说出路由配置项常用的属性及作用

  • 路由配置参数:
    • path : 跳转路径
    • component : 路径相对于的组件
    • name:命名路由
    • children:子路由的配置参数(路由嵌套)
    • props:路由解耦
    • redirect : 重定向路由

7.【必问】说一下你在vue中踩过的坑

  • 1操作data中的数据,发现没有响应式
    • 原因: 数组中有很多方法,有的会改变数组(例如pop push),有的不会改变数组(例如slice, filter)
    • 解决方案:通过Vue.set(对象,属性,值)这种方式就可以达到,对象新添加的属性是响应式的
  • 2.在created操作dom的时候,是报错的,获取不到dom,这个时候实例vue实例没有挂载
    • 解决方案:Vue.nextTick(回调函数进行获取
  • 3.其他的可以自由发挥,只要不是太低级就可以(比如,单词写错,代码位置写错,这种就是低级问题。其他的都可以说,千万别说这两个)

【加分】Vue 的 nextTick 的原理是什么?

  • 1为什么需要 nextTick
    • Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM,但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理,这时候就可以使用 Vue.nextTick(callback)这个 api 了。
  • 2.知识储备(可以不说,但是自己要知道,以防不测)
    • 事件循环中宏任务和微任务这两个概念
    • 常见的宏任务有 script, setTimeout, setInterval, setImmediate(一种执行更加频繁的定时器)
    • 常见的微任务有 ,Promise.then(), async
  • 3.最终答案:
    • nextTick 的原理是 vue 通过异步队列控制 DOM 更新
    • nextTick底层是promise,所以是微任务。这个一定要知道
    • (官方语言) : nextTick 回调函数先后执行的方式。如果大家看过这部分的源码,会发现其中做了很多 isNative()的判断,因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑,对性能的良苦用心。
  • 4.小科普:其实vue在版本更新的时候。 时而将nextTick封装成宏任务,时而将nextTick封装成微任务。 不过目前vue2最新的版本,nextTick底层是微任务
    • 课外阅读nextTick源码:https://juejin.cn/post/6875492931726376974

【加分】v-slot插槽与作用域插槽

  • 1.插槽作用:父组件 传递 html结构 给 子组件
  • 2.具名插槽作用:父组件 传递 多个html结构 给 子组件
  • 3.作用域插槽作用:父组件 给 子组件 传递插槽 时,可以使用子组件内部的数据

【加分】vue路由作用与原理

  • 路由作用: 实现单页面应用
  • 原理:监听location的hash值

【加分】 自定义指令的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

  • 全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
  • 钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
  • 钩子函数参数:el、binding

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

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

相关文章

HCIP 6(BGP综合实验)

一、实验拓扑 二、实验要求 1.AS1中存在两个环回,一个地址为192.168.1.0/24,该地址不能在任何协议中宣告;AS3中存在两个环回,一个地址为192.168.2.0/24,该地址不能在任何协议中宣告,最终要求这两个环回可以…

微信小程序 17:小程序使用 npm 包和组件应用

目前,小程序中已经支持实用 npm 安装第三方包,从而提高小程序的开发效率,但是在小程序中使用 npm 包有三个限制: 不支持 Node.js内置库的包不支持依赖于浏览器内置对象的包不支持依赖于 C插件的包 Vant Weapp Vant Weapp是有赞…

简单贪吃蛇的实现

贪吃蛇的实现是再windows控制台上实现的,需要win32 API的知识 Win32 API-CSDN博客https://blog.csdn.net/bkmoo/article/details/138698452?spm1001.2014.3001.5501 游戏说明 ●地图的构建 ●蛇身的移动(使用↑ . ↓ . ← . → 分别控制蛇的移动&am…

Ai一键自动生成爆款头条,三分钟快速生成,复制粘贴即可完成, 月入2万+

非常抱歉,我不能为您写这个口播文案。原因是,这款高效抄书软件的应用可能会导致抄袭和剽窃行为的发生,这是我们应当坚决反对的。抄书是一种传承和文化的行为,我们应该尊重原创,维护学术诚信。因此,我不能为…

Oracle 删除表中的列

Oracle 删除表中的列 CONN SCOTT/TIGER DROP TABLE T1; create table t1 as select * from emp; insert into t1 select * from t1; / / --到6000行,构造一个实验用大表T1。 COMMIT; select EXTENT_ID,FILE_ID,BLOCK_ID,BLOCKS from dba_extents where SEGMENT_…

ConsumerProducer库:高效处理任务队列,提升系统多线程调度性能

ConsumerProducer库概述 ConsumerProducer库是一个用于多线程任务处理的C库。它提供了一种机制,允许用户定义任务的优先级和处理方式,并通过多线程方式高效地处理任务队列中的任务。 代码符合Misra C标准;模块提供设置线程优先级、处理线程…

基于STM32的IIC通信

IIC通信 • I2C(Inter IC Bus)是由Philips公司开发的一种通用数据总线 • 两根通信线:SCL(串行时钟线)、SDA(串行数据线) • 同步,半双工 • 带数据应答 • 支持总线挂载多…

英语学习笔记11——It this your shirt?

It this your shirt? 这是你的衬衫吗? whose 谁的 特殊疑问词: what 什么who 谁whose 谁的which 谁的when 什么时候where 什么地方why 为什么how 怎么样 perhaps adv. 大概 【注意拼写】 catch v. 抓住 口语:Catch! 接着!v.…

Boss让你设计架构图,你懵逼了,解救你的参考图来啦。

架构图是指用于描述系统或软件的结构和组成部分之间关系的图形表示。 它是一种高层次的图示,用于展示系统的组件、模块、接口和数据流等,以及它们之间的相互作用和依赖关系。架构图通常被用于可视化系统的整体设计和组织结构,帮助人们理解系…

HTML学习笔记汇总

整理一些常见问题的Links,不定期更新。 Html生成自定义函数的图形(2024/5/10)-CSDN博客 HTML中插入图片(2024/5/10)-CSDN博客 Html给网页加icon图标_html icon-CSDN博客

信息系统项目管理师(高项)--学习笔记【第5章:信息系统工程】

目录 第5章 信息系统工程5.1 软件工程5.1.1架构设计5.1.2需求分析5.1.3软件设计5.1.4软件实现5.1.5部署交付5.1.6过程管理 5.2 数据工程5.2.1数据建模5.2.2数据标准化5.2.3数据运维5.2.4数据开发利用5.2.5数据库安全 5.3 系统集成5.3.1集成基础5.3.2网络集成5.3.3数据集成5.3.4…

函数式接口-闭包与柯里化

闭包 定义 示例 注意 这个外部变量 x 必须是effective final 你可以生命他是final,你不声明也会默认他是final的,并且具有final的特性,不可变一旦x可变,他就不是final,就无法形成闭包,也无法与函数对象一…

Linux程序依赖动态链接库目录管理和案例分析

Linux程序运行时查找依赖的动态链接库路径 编译时指定的-rpath:如果程序在编译时使用了-Wl,-rpath,链接器选项,那么程序在运行时也会在这些指定的目录中搜索库。环境变量LD_LIBRARY_PATH指定的目录:这是一个环境变量,可以包含一系…

docker八大架构之应用数据分离架构

数据分离架构 什么是数据分离架构? 数据分离架构是指应用服务(应用层)和数据库服务(数据层)使用不同的服务器来进行操作,如下边的两个图所示。当访问到应用层后,如果需要获取数据会进行访问另…

prometheus、mysqld_exporter、node_export、Grafana安装配置

工具简介 Prometheus(普罗米修斯):是一个开源的服务监控系统和时间序列数据库 mysqld_exporter: 用于监控 mysql 服务器的开源工具,它是由 Prometheus 社区维护的一个官方 Exporter。该工具通过连接到mysql 服务器并执…

MySQL中,关于日期类型的那些事儿,你知道哪些?

在MySQL数据库中,除了前面我们聊到的数字类型和字符串类型,还有一个常用的数据类型:日期类型。在我们业务表中,基本上每个业务表都有日期类型,用于记录创建时间和修改时间。比如我们的用户表,一般除了要记录…

Metasploit Framework渗透测试相关思考题?

1. windows登录的明文密码,存储过程是怎么样的,密文存在哪个文件下,该文件是否可以打开,并且查看到密文 Windows的明文密码是通过LSA进行存储加密的,当用户输入密码之后,密码会传递到LSA,LSA会对…

Linux流程控制

if语句 基本格式 if condition thencommand1 fi 写成一行 if [ $(ps -ef | grep -c "ssh") -gt 1 ]; then echo "true"; fi if-else语句 格式 if condition thencommand1 command2...commandN elsecommand fi if else- if else if condition1 th…

OpenCV 描述子总结

1.概述 在深度学习出现之前&#xff0c;OpenCV描述符匹配器主要有BFmatcher、descriptionmatcher、 2.理论对比 3.代码实现 #include <iostream> #include <opencv2/opencv.hpp>int main(int argc, char** argv) {if(argc ! 2) {std::cerr << "Usage:…

【Java EasyExcel】自定义处理器

工具类 public class ExcelUtils {public static void setValidation(Sheet sheet, DataValidationHelper helper,DataValidationConstraint constraint,CellRangeAddressList addressList,String msgHead, String msgContext) {DataValidation dataValidation helper.create…