常见前端面试之VUE面试题汇总二

4. slot 是什么?有什么作用?原理是什么?

slot 又名插槽,是 Vue 的内容分发机制,组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。插槽 slot 是子组件的一个模板 标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决 定的。slot 又分三类,默认插槽,具名插槽和作用域插槽。

默认插槽:又名匿名插槽,当 slot 没有指定 name 属性值的时候一个 默认显示插槽,一个组件内只有有一个匿名插槽。具名插槽:带有具体名字的插槽,也就是带有 name 属性的 slot,一 个组件可以出现多个具名插槽。

作用域插槽:默认插槽、具名插槽的一个变体,可以是匿名插槽,也 可以是具名插槽,该插槽的不同点是在子组件渲染作用域插槽时,可 以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过 来的数据决定如何渲染该插槽。

实现原理:当子组件 vm 实例化时,获取到父组件传入的 slot 标签的 内容,存放在 vm.$slot 中,默认插槽为 vm.$slot.default,具名插 槽为 vm.$http://slot.xxx,xxx 为插槽名,当组件执行渲染函数时候,遇 到 slot 标签,使用$slot 中的内容进行替换,此时可以为插槽传递 数据,若存在数据,则可称该插槽为作用域插槽。

5. $nextTick 原理及作用

Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的 一种应用。

nextTick 的 核 心 是 利 用 了 如 Promise 、 MutationObserver 、setImmediate、setTimeout 的原生 JavaScript 方法来模拟对应的 微/宏任务的实现,本质是为了利用 JavaScript 的这些异步回调任 务队列来实现 Vue 框架中自己的异步回调队列。

nextTick 不仅是 Vue 内部的异步队列的调用方法,同时也允许开发 者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时 机的后续逻辑处理

nextTick 是典型的将底层 JavaScript 执行原理应用到具体案例中 的示例,引入异步更新队列机制的原因∶如果是同步更新,则多次对一个或多个属性赋值,会频繁触发 UI/DOM 的渲染,可以减少一些无用渲染

同时由于 VirtualDOM 的引入,每一次状态发生变化后,状态变化的 信号会发送给组件,组件内部使用 VirtualDOM 进行计算得出需要更 新的具体的 DOM 节点,然后对 DOM 进行更新操作,每次更新状态后 的渲染过程需要更多的计算,而这种无用功也将浪费更多的性能,所 以异步渲染变得更加至关重要

Vue 采用了数据驱动视图的思想,但是在一些情况下,仍然需要操作 DOM。有时候,可能遇到这样的情况,DOM1 的数据发生了变化,而 DOM2 需要从 DOM1 中获取数据,那这时就会发现 DOM2 的视图并没有更新,这时就需要用到了 nextTick 了。

由于 Vue 的 DOM 操作是异步的,所以,在上面的情况中,就要将 DOM2 获取数据的操作写在$nextTick 中。

所以,在以下情况下,会用到 nextTick:

在数据变化后执行的某个操作,而这个操作需要使用随数据变化而变 化的 DOM 结构的时候,这个操作就需要方法在 nextTick()的回调函 数中。

在 vue 生命周期中,如果在 created()钩子进行 DOM 操作,也一定要 放在 nextTick()的回调函数中。

因为在 created()钩子函数中,页面的 DOM 还未渲染,这时候也没办 法操作 DOM,所以,此时如果想要操作 DOM,必须将操作的代码放在 nextTick()的回调函数中。

6. Vue 单页应用与多页应用的区别

概念:

SPA 单页面应用(SinglePage Web Application),指只有一个主页 面的应用,一开始只需要加载一次 js、css 等相关资源。所有内容都 包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换 相关组件,仅仅刷新局部资源。

MPA 多页面应用 (MultiPage Application),指有多个独立页面的 应用,每个页面必须重复加载 js、css 等相关资源。多页应用跳转,需要整页资源刷新。

区别:

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

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

相关文章

分类预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机多输入分类预测

分类预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机多输入分类预测 目录 分类预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机多输入分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.分类预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机多输入分…

LLaMA-7B微调记录

Alpaca(https://github.com/tatsu-lab/stanford_alpaca)在70亿参数的LLaMA-7B上进行微调,通过52k指令数据(https://github.com/tatsu-lab/stanford_alpaca/blob/main/alpaca_data.json),在8个80GB A100上训…

【仿写tomcat】一、tomcat工作流程

仿写tomcat 简介tomcat简介流程分析tomcat是怎么和访问者交互的?流程图 简介 作者前不久刚仿写了一个简易的tomcat,在此分享给各位,此篇为对tomcat的简介和流程分析,具体仿写内容后续会贴在这里 扫描java文件,获取带…

常量变量习题答案

基础题目: 第一题 按步骤编写代码,效果如图所示: 编写步骤: 定义类 Test1定义 main方法控制台输出5行字符串类型常量值控制台输出5行字符类型常量值 参考答案: public class Test1 {public static void main(String[] args) {/…

TheGem主题 - 创意多用途和高性能WooCommerce WordPress主题/网站

TheGem主题概述 – 适合所有人的TheGem 作为设计元素、样式和功能的终极 Web 构建工具箱而设计和开发,TheGem主题将帮助您在几分钟内构建一个令人印象深刻的高性能网站,而无需触及一行代码。不要在编码上浪费时间,探索你的创造力&#xff01…

【Visual Studio】生成.i文件

环境 VS版本:VS2013 问题 如何生成.i预编译文件? 步骤 1、打开VS项目属性,打开C/C\预处理器页面,【预处理到文件】选择是,开启。 2、生成文件如下。 3、正常编译需要关闭此选项。

Azure VM上意外禁用NIC如何还原恢复

创建一个windows虚拟机,并远程连接管理员的方式打开powershell 首先查看虚拟网卡,netsh interface show interface 然后禁用虚拟网卡 ,netsh interface set interface Ethernet disable 去Azure虚拟机控制台,打开串行控制台 控制台中键入cmd,…

JAVA开发环境接口swagger-ui使用总结

一、前言 swagger-ui是java开发中生产api说明文档的插件&#xff0c;这是后端工程师和前端工程师联调接口的桥梁。生成的文档就减少了很多没必要的沟通提高开发和测试效率。 二、 swagger-ui的使用 1、引入maven依赖 <dependency><groupId>io.springfox</grou…

开源语音聊天软件Mumble

网友 大气 告诉我&#xff0c;Openblocks在国内还有个版本叫 码匠&#xff0c;更贴合国内软件开发的需求&#xff0c;如接入了国内常用的身份认证&#xff0c;接入了国内的数据库和云服务&#xff0c;也对小程序、企微 sdk 等场景做了适配。 在 https://majiang.co/docs/docke…

ubuntu 搜狗输入法安装 和 无法输入中文

一、下载搜狗输入法Linux版本。 搜狗输入法linux-首页 二、安装fcitx输入框架&#xff0c;及相关的依赖库 sudo apt install fcitx-bin sudo apt-get install fcitx-table sudo apt --fix-broken install 三、安装搜狗输入法 sudo dpkg -i sougou....deb 四、通过 设置&…

NPM 管理组织成员

目录 1、向组织添加成员 1.1 邀请成员加入您的组织 1.2 撤销组织邀请 2、接收或拒接组织邀请 2.1 接收组织邀请 2.2 拒绝组织邀请 3、组织角色和权限 4、管理组织权限 5、从组织中删除成员 1、向组织添加成员 作为组织所有者&#xff0c;您可以将其他npm用户添加到…

vim 配置环境变量与 JDK 编译器异常

vim 配置环境变量 使用 vim 打开系统中的配置信息&#xff08;不存在将会创建&#xff09;&#xff1a; vim ~/.bash_profile 以配置两个版本 JDK 为例&#xff08;前提是已安装 JDK&#xff09;,使用上述命令打开配置信息&#xff1a; 输入法调成英文&#xff0c;输入 i&…

新的后端渲染:服务器驱动UI

通过API发送UI是一种彻底的新方法&#xff0c;将改变传统的UI开发。 一项正在改变我们对用户界面 (UI) 的看法的技术是通过 API 发送 UI&#xff0c;也称为服务器驱动UI。这种方法提供了新水平的活力和灵活性&#xff0c;正在改变 UI 开发的传统范例。 服务器驱动 UI 不仅仅是…

python 连接Redis 数据库

pip install redis python代码 import redis# 连接数据库 r redis.Redis(host192.168.56.15, port6379, db0)# 存储数据 #r.set(key, value) r.set(name, zaraNet)# 获取数据 value r.get(name) print(value)# 关闭连接&#xff08;可选&#xff09; r.close()

SFL218-20-32-40、SFL218B-40-21-15电液伺服阀

SFL218B-04-21-10、SFL218B-10-21-15、SFL218B-20-21-40、SFL218B-40-21-15、SFL218B-60-21-40、SFL218-04-32-10、SFL218-10-32-15、SFL218-20-32-40、SFL218-40-32-15、SFL218-60-32-40 SFL218A-SFL218B采用千式力马达和两级液压放大器结构前置级为无摩擦副的双喷嘴挡板阀输…

mysql------做主从复制,读写分离

1.为什么要做主从复制&#xff08;主从复制的作用&#xff09; 做数据的热备&#xff0c;作为后备数据库&#xff0c;主数据库服务器故障后&#xff0c;可切换到从数据库继续工作&#xff0c;避免数据丢失。 架构的扩展。业务量越来越大,I/O访问频率过高&#xff0c;单机无法满…

树莓派4B raspiberry设置vnc远程登录

树莓派开启远程登录&#xff0c;本来通过raspi-config就可以设置的&#xff0c;但是这里安装的镜像可能不是官方镜像&#xff0c;导致raspi-config设置不生效。早先的版本可能通过raspi-config选择 Interfacing Options ,选择 Enable VNC就可以安装realvnc-vnc-server&#xff…

阿里云服务器-修改ecs操作系统,把window系统更换成Linux操作系统

其他sql格式也在更新中&#xff0c;可直接查看这个系列&#xff0c;要是没有你需要的格式&#xff0c;可在评论或私信我 总目录 目录-后期更新打算 hive的nvl中的子查询 总目录我这个是window&#xff0c;默认应该都是window&#xff0c;我需要改成Linux系统第一步&#xff…

WX1860- ngbe-1.2.5 xdp程序在路由模式下,使用iperf工具测试数据包不转发,用jmeter可以

本地验证时重定向iperf包有出现calltrace错误&#xff0c;经推断&#xff0c;系统PAGE_SIZE<8k时可能出现&#xff08;getconf PAGE_SIZE指令可查看&#xff09;&#xff0c;按下图将ngbe_main.c的2350行ngbe_rx_bufsz改为ngbe_rx_pg_size可修复。其次&#xff0c;需要将加载…

Stable Diffusion 系列教程 | 文生图 - 提示词

目录 1.提示词 基本的规则 2.提示词分类 2.1内容性提示词 2.2 画风艺术派提示词 2.3 画幅视角 2.4画质提示词 3 反向提示词 3.1 内容性反向提示词 3.2 画质性反向提示词 4 实例分析 5 权重 5.1 方法一 5.2 方法二 6.参数 7. 学习and 技巧 7.1 辅助写提示词的网…