前端试题2#记录

1、介绍以下CSS的盒子模型

盒子模型分为两种:

(1)第一种是W3c标准的盒子模型(标准盒模型)

  • width和height:内容的宽度、高度(不是盒子的宽度、高度)。
  • padding:内边距。
  • border:边框。
  • margin:外边距。

(2)第二种IE标准的盒子模型(怪异盒模型)

  • width和height:内容的宽度、高度(不是盒子的宽度、高度)。
  • padding:内边距。
  • border:边框。

2、1rem、1em、1vh、1px各自代表什么

rem:页面所有使用rem单位的长度都是相对于根元素元素的font-size大小。即1rem等于根元素元素的font-size大小。

em:子元素字体大小的em是相对于父元素字体大小。元素的width/height/padding/margin用em的话是相对于该元素的font-size。

vh:全称是 Viewport Height,视口的高度,1vh相当于 视口高度的 1%。

px:相对长度单位。

3、vuex主要包含几个模块

五个模块分别是:state getters mutations actions modules.
State:就是Vuex中的数据仓库,用于存储所有组件的公共数据,数据需初始化且不支持直接修改。
Getters:从基本数据派生的数据,这是个计算属性,简单说就是对state中的数据进行二次运算,获取新的属性值。

Mutations:提交更改数据的方法,同步!用来修改state中的数据。

Actions:处理异步操作!同样用来修改state中的数据,但是需要提交Mutations用来实现修改数据。

Modules:模款化vuex,是解决了当 state 中很复杂臃肿的时候,module 可以将 store 分割成模块,每个模块中拥有自己的 state、mutation、action和 getter。

4、SPA单页面优缺点有哪些

优点:

1. 更好的用户体验

2. 更快的页面加载速度

缺点:

1. 对网络和服务器性能的要求更高

2. 对浏览器兼容性的要求更高

5、computed和watch的区别和运用场景

computed:是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;

当一个属性的值依赖于一个或多个其他属性的值时或一个属性的值需要进行复杂的逻辑计算时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;可以理解为一个结果受到多个因素的影响。

watch:没有缓存性,更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;当我们需要深度监听对象中的属性时,可以打开deep:true选项,这样便会对对象中的每一项进行监听。

6、vue生命周期的理解

  1. beforeCreate(已被移除) => 在组件实例初始化之前调用。 对应的组合式API:在 <script setup> 中直接编写初始化逻辑。
  2. created(已被移除) => 在组件实例创建完成后调用。 对应的组合式API:在 setup() 函数中编写初始化逻辑。
  3. beforeMount(被取代) => 在组件挂载到DOM之前调用。 对应的组合式API:可以在 onBeforeMount 钩子函数中进行操作。
  4. mounted(被取代) => 在组件挂载到DOM后调用。 对应的组合式API:可以在 onMounted 钩子函数中进行操作。
  5. beforeUpdate(被取代) => 在组件更新之前调用。 对应的组合式API:可以在 onBeforeUpdate 钩子函数中进行操作。
  6. updated(被取代) => 在组件更新之后调用。 对应的组合式API:可以在 onUpdated 钩子函数中进行操作。
  7. beforeDestroy(被取代) => 在组件卸载之前调用。 对应的组合式API:可以在 onBeforeUnmount 钩子函数中进行操作。
  8. destroyed(被取代) => 在组件卸载之后调用。 对应的组合式API:可以在 onUnmounted 钩子函数中进行操作。

7、vue组件通信有哪几种

  • 通过 props 传递

  • 通过 $emit 触发自定义事件

  • 使用 ref

  • EventBus

  • parent或root

  • attrs 与 listeners

  • Provide 与 Inject

  • Vuex

8、vue3的特性有哪些

1、Vue3 组合式 API VS Vue2 选项式 API

2、数据响应式原理 Proxy 相对于 Object.defineProperty

  • proxy 的性能本来比 defineProperty 好,proxy。
  • 可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下一级的属性。
  • 可以监听数组变化。
  • 可以劫持整个对象。
  • 操作时不是对原对象操作,是 new Proxy 返回的一个新对象。
  • 可以劫持的操作有 13 种。

3、<script setup> 语法糖

4、生命周期钩子

  • setup 代替了 beforeCreate,created,如果在 options api 中书写,会在 beforeCreate 之前执行
  • mounted、beforeMount、beforeUpdate、updated ,都改成 onxxx
  • beforeDestroy 改成 onBeforeUnmount;
  • destroyed 改成 onUnmounted

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

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

相关文章

Java常用API之Collections类解读

写在开头&#xff1a;本文用于作者学习Java常用API 我将官方文档中Collections类中所有API全测了一遍并打印了结果&#xff0c;日拱一卒&#xff0c;常看常新 addAll() 将所有指定元素添加到指定 collection 中 可以添加一个或多个元素 Testpublic void test_addAl…

HarmonyOS入门-ArkTS学习(一)

1. 什么是ArkTS语言 学习之前&#xff0c;我们先初步了解下什么是ArkTS 官方指南这样介绍&#xff1a; ArkTS是TS的超集&#xff0c;ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力&#xff0c;再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共…

2024.2.26力扣每日一题——二叉搜索树的范围和

2024.2.26 题目来源我的题解方法一 深度搜索&#xff08;中序遍历&#xff09;方法二 广度搜索&#xff08;层序遍历&#xff09; 题目来源 力扣每日一题&#xff1b;题序&#xff1a;938 我的题解 方法一 深度搜索&#xff08;中序遍历&#xff09; 利用二叉搜索树中序遍历…

Python:使用Cator实现mysql数据库的CURD简化操作

目录 简介安装使用示例1、获取Database 对象2、Database对象3、Table操作 支持的占位符显示sql日志注意问题 Github: https://github.com/mouday/catorPypi: https://pypi.org/project/catorgitee: https://gitee.com/mouday/cator 简介 支持 mysql和sqlite数据库, 在现有连接…

OpenHarmony实战:轻量级系统之子系统移植概述

OpenHarmony系统功能按照“系统 > 子系统 > 部件”逐级展开&#xff0c;支持根据实际需求裁剪某些非必要的部件&#xff0c;本文以部分子系统、部件为例进行介绍。若想使用OpenHarmony系统的能力&#xff0c;需要对相应子系统进行适配。 OpenHarmony芯片适配常见子系统列…

留学生在美国大学利用AI工具到底算不算作弊呢?

自2022年以来&#xff0c;美国大学就开启了一场AI作弊与反作弊大战 战场小至测验&#xff0c;大至申请 这场战争并没有一方胜利&#xff0c;作弊者心思费尽 校方反作弊弄得教授们苦不堪言 那么作为中国留学生该如何避免这场战役呢&#xff1f; 毕竟还是学业要紧呢…… 故事…

软考 系统架构设计师系列知识点之软件架构风格(10)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之软件架构风格&#xff08;9&#xff09; 所属章节&#xff1a; 第7章. 系统架构设计基础知识 第3节. 软件架构风格 相关试题 7. 某企业内部现有的主要业务功能已封装成为Web服务。为了拓展业务范围&#xff0c;需要将…

让六西格玛培训有效的三个步骤,拿走不谢!

近年来&#xff0c;六西格玛作为一种先进的质量管理方法&#xff0c;被众多企业视为提升产品质量、优化流程、减少浪费的利器。然而&#xff0c;如何使六西格玛培训真正落地生根&#xff0c;发挥出其应有的效果&#xff0c;成为了许多企业关注的焦点。本文&#xff0c;天行健Si…

docker容器部署gitlab的runner的shell模式注册下job中无法使用docker指令

引言 现需通过gitlab-runner来构建jar部署的镜像,发现在job中无法使用docker指令,解决的过程中出现一系列异常,在此做个问题解决的记录。 内容 通过docker-compose部署 name: java-env services:env-gitlab-runner:restart: alwaysimage: env/gitlab-runner-java:latest…

每日五道java面试题之消息中间件MQ篇(二)

目录&#xff1a; 第一题. RabbitMQ的工作模式第二题. 如何保证RabbitMQ消息的顺序性&#xff1f;第三题. 消息如何分发&#xff1f;第四题. 消息怎么路由&#xff1f;第五题. 如何保证消息不被重复消费&#xff1f;或者说&#xff0c;如何保证消息消费时的幂等性&#xff1f; …

前端导出文本内容为csv文件,excel乱码

原因&#xff1a;编码格式问题&#xff0c;需要改为utf-8 bom // Create blob with utf8-bom 编码 const createBlobWithBOM(data, mimeType)> {const bom [0xEF, 0xBB, 0xBF];const bomArray new Uint8Array(bom);const dataArray new TextEncoder().encode(data);const…

Android adb ime 调试输入法

目录 前言列出所有输入法仅列出输入法 id列出所有输入法的所有信息 启用/禁用 输入法启用输入法禁用输入法 切换输入法还原输入法 前言 安装多个输入法后&#xff0c;可以在设置里进行切换。 既然是开发&#xff0c;能用命令就就命令~ ime 帮助说明&#xff1a; ime <c…

目标检测、识别和语义分割的标注工具安装

计算机视觉 图像分类&#xff08;目标检测&#xff09;&#xff1a;一张图像中是否含某种物体物体定位&#xff08;目标检测与目标识别&#xff09;&#xff1a;确定目标位置和所属类别。语义分割&#xff08;目标分割和目标分类&#xff09;&#xff1a;对图像进行像素级分类…

计算机视觉无人驾驶技术:入门指南

I. 引言&#xff1a; 计算机视觉无人驾驶技术是一种基于计算机视觉和机器学习技术的自动化驾驶技术。它可以通过搭载各种传感器和摄像机&#xff0c;让车辆自主感知周围环境&#xff0c;实现尽可能自动化的驾驶操作。 这种技术具有重要性和优势&#xff0c;包括&#xff1a; …

js 本地缓存localStorage和sessionStorage 还有cookie 用法和区别

一、定义和使用 localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 localStorage 用于长久保存整个网站的数据&#xff0c;保存的数据没有过期时间&#xff0c;直到手动去删除。 sessionStorage 数据保存在当前会话中&#xff0c;该数据对象临时保…

Mini-React

jsx jsx 是React中对于JavaScript的语法扩展&#xff0c;允许在JavaScript中去写类似于HTML的代码。使得开发者能够以一种更直观和声明式的方式去编写用户界面 vdom vdom是React为了提高性能而去引入的一个虚拟的dom表示。 它是一个轻量级的 JavaScript 对象&#xff0c;用于…

推荐算法策略需求-rank model优化

1.pred_oobe (base) [rusxx]$ pwd /home/disk2/data/xx/icode/baidu/oxygen/rus-pipeline/pipeline-migrate/UserBaseActiveStatPipeline/his_session (base) [rusxx]$ sh test.sh 2. user_skill_history_dict_expt2包含userid [workxx]$ vim /home/work/xx/du-rus/du_rus_o…

Python 之 Flask 框架学习

毕业那会使用过这个轻量级的框架&#xff0c;最近再来回看一下&#xff0c;依赖相关的就不多说了&#xff0c;直接从例子开始。下面示例中的 html 模板&#xff0c;千万记得要放到 templates 目录下。 快速启动 hello world from flask import Flask, jsonify, url_forapp F…

Redis集群的方案

文章目录 主从同步哨兵模式 在Redis中提供的集群方案总共有三种&#xff1a;主从同步、哨兵模式、Redis分片集群 主从同步 主从解决的是高并发问题。 单个Redis节点的并发能力有限&#xff0c;要进一步提高Redis的并发能力&#xff0c;可以搭建主从集群&#xff0c;实现读写分…

【edge浏览器无法登录某些网站,以及迅雷插件无法生效的解决办法】

edge浏览器无法登录某些网站&#xff0c;以及迅雷插件无法生效的解决办法 edge浏览器无法登录某些网站&#xff0c;但chrome浏览器可以登录浏览器插件无法使用&#xff0c;比如迅雷如果重装插件重装浏览器重装迅雷后仍然出现问题 edge浏览器无法登录某些网站&#xff0c;但chro…