前端问题整理

Vue

  1. vue mvvm(Model-View-ViewModel)架构模式原理

    • Model 是数据层,即 vue 实例中的数据
    • View 是视图层, 即 dom
    • ViewModel,即连接Model和Vue的中间层,Vue实例就是ViewModel
    • ViewModel 负责将 Model 的变化反映到 View 上,同时也监听 View 的变化并反映到 Model 上,实现了双向数据绑定。
  2. 组件传参方式有哪些?

    • props和emit

    • 插槽

    • $refs

    • event-bus $emit $on

    • vuex和pinia

    • 路由传参

    • 本地储存

  3. 什么是vue实例?

    vue实例包含了数据、模板、方法等属性,负责处理视图的渲染和交互逻辑

  4. computed和watch原理

    计算属性 (computed) 的原理:

    计算属性是 Vue 中用于派生数据的一种方式,它的原理如下:

    依赖追踪:当在计算属性中使用响应式数据时,Vue 会自动建立一个依赖关系。这意味着计算属性知道哪些响应式数据影响了它的值。

    缓存:计算属性会缓存它的计算结果,只有当依赖的响应式数据发生变化时,才会重新计算。这样可以避免不必要的计算,提高性能。

    懒计算:计算属性只在实际需要时才会计算,这意味着只有当计算属性被访问时,它才会执行计算逻辑。

    自动更新:当依赖的响应式数据发生变化时,与之相关的计算属性会自动重新计算其值,并确保界面上相应的数据也会更新。

    监听属性 (watch) 的原理:

    监听属性用于监视响应式数据的变化,并执行副作用代码,其原理如下:

    侦听变化:当你在 Vue 实例中定义一个 watch 属性,你可以指定要监听的响应式数据。

    回调函数:你可以为每个被监听的数据定义一个回调函数。当被监听的数据发生变化时,这些回调函数会被触发执行。

    异步执行:Vue 默认会在数据变化后异步执行 watch 回调函数,以避免阻塞主线程。

    取消监听:你可以通过调用 unwatch 或 unwatchAll 方法来取消对响应式数据的监听。

  5. vue双向绑定原理

    Object.defineProperty(obj 要定义/修改的属性的对象, prop 要定义/修改的属性名, descriptor 具体的方法)

    <script type="text/javascript">var obj = {};Object.defineProperty(obj, 'txt', {get: function() {return obj;},set: function(val) {document.getElementById("txt").value = val;document.getElementById("show").innerText = val;}})document.addEventListener("keyup", function (e) {obj.txt = e.target.value;})
    </script>
    
  6. $nextTick

    DOM 更新之后执行回调函数

    新增表格输入框自动聚焦

  7. vue2和vue3的差异

    • setup相当于整合了beforeCreate和created
    • 移除了一些修饰符
    • ref reactive
    • 源码使用typescript进行重构,vue对typescript支持更加友好了
    • 样式穿透 v-deep
    • 插槽

useState
const [count,setCount] = useState
useEffect

useCallback
memo
useMemo
useRef
useReducer
useContext

首页加载优化
  • 路由懒加载
  • 组件按需引入
  • 打包配置externals分离资源库
  • cdn引入第三方库
  • gzip压缩
  • js资源异步加载延迟执行
  • css放头部、js放底部
  • 白屏配合骨架图、loading
  • 服务端渲染,ssr技术,next.js
网页性能优化
  • 网络请求优化

  • 资源精简优化

  • 渲染优化

  • 图片优化

    图片懒加载

  • 代码优化

    组件化、模块化、代码复用

webpack
  • tree shaking 代码分割
  • dllPlugin 分离打包
  • hotModuleReplscementPlugin 热更新
  • HtmlWebpackPlugin 生成入口html文件

react 新版本不同的东西
es6
react mome 怎么使用
父子传参 互相调用方法
webpack
首页加载
css选择器
flex:1使用条件

浏览器兼容、分辨率适配
  • css兼容:reset.css

    *{margin:0;padding:0;)}

  • 加浏览器前缀兼容

  • 设置统一字体:ttf字体包

  • 媒体查询

  • 百分比

  • em、rem

统计数组中每项出现的次数
let arr = [2, 3, 4, 2, 0, 1, 3, 2, 2, 9, 7, 100]
let obj = {}
for(var i = 0; i < arr.length; i++) {let key = arr[i]// 三元运算符判断obj[key] == undefined ? obj[key] = 1 : obj[key]++
}
console.log(obj);

后端获取数据到渲染
输入react 新版本不同的东西
url到页面显示过程
重绘,回流和重排
json深拷贝缺点
rem em vw vh
扩展运算原理

输入url地址到浏览器显示页面发生了什么
  • DNS对域名进行解析

  • 建立TCP连接(三次握手) 我要xxx=>确定吗?=>确定

  • 发送请求

  • 返回结果

  • 解析 HTML: 浏览器解析 HTML 并构建 DOM 树。

  • 解析 CSS: 浏览器解析 CSS 文件并构建 CSSOM 树。

  • 合并 DOM 和 CSSOM: 将 DOM 树和 CSSOM 树合并成渲染树(Render Tree)。

  • 布局(Layout): 根据渲染树计算每个元素的大小和位置,生成布局(Layout)。

  • 绘制(Paint): 将布局绘制到屏幕上。

  • 重绘与重排: 当页面的样式或布局发生变化时,浏览器会触发重绘(Repaint)和重排(Reflow),其中重排会引起布局的重新计算,性能开销较大,应尽量避免。

  • 在这里插入图片描述

iframe缺点
  • 不利于seo优化
  • 移动设备兼容性差
  • 阻塞主页面onLoad
  • 前进返回问题

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

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

相关文章

测试基础13:测试用例设计方法-错误推断、因果图判定表

课程大纲 1、错误推测法 靠主观经验和直觉来推测可能容易出现问题的功能或场景&#xff0c;设计相关测试用例进行验证。 2、因果图&判定表 2.1定义 因果图和判定表是分析和表达多逻辑条件下&#xff0c;执行不同操作的情况的工具。 &#xff08;因果图和判定表配合使用&a…

ETL可视化工具 DataX -- 简介( 一)

引言 DataX 系列文章&#xff1a; ETL可视化工具 DataX – 安装部署 ( 二) 1.1 DataX 1.1.1 Data X概览 DataX 是阿里云DataWorks数据集成的开源版本&#xff0c;在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServ…

(el-Transfer)操作(不使用 ts):Element-plus 中 Select 组件动态设置 options 值需求的解决过程

Ⅰ、Element-plus 提供的Select选择器组件与想要目标情况的对比&#xff1a; 1、Element-plus 提供Select组件情况&#xff1a; 其一、Element-ui 自提供的Select代码情况为(示例的代码)&#xff1a; // Element-plus 提供的组件代码: <template><div class"f…

Linux ssh远程关闭如何保持进程在后台运行的解决方案

问题描述&#xff1a; Unix/Linux下一般想让某个程序在后台运行&#xff0c;很多都是使用 nohup & 在程序结尾让程序自动运行。 使用SSH远程Linux服务器启动应用&#xff0c;都是使用nohup &命令&#xff0c;结果关闭SSH应用仍然挂断了。 我们很多程序并不象mysqld一…

leetcode3无重复字符的最长字串(重点讲滑动窗口)

本文主要讲解无重复字符的最长字串的要点与细节&#xff0c;根据步骤一步步走更方便理解 c与java代码如下&#xff0c;末尾 具体要点&#xff1a; 1. 区分一下子串和子序列 子串&#xff1a;要求元素在母串中是连续地出现 子序列&#xff1a;不要求连续 2. 题目中有两个核心…

上位机图像处理和嵌入式模块部署(h750和市场上的开发板)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 目前在电商网站上面&#xff0c;关于h750的开发板很多。一种是某原子和某火出品的板子&#xff0c;这一类的板子就是做的比较大&#xff0c;功能比…

【LeetCode刷题】前缀和解决问题:560.和为k的子数组

【LeetCode刷题】Day 16 题目1&#xff1a;560.和为k的子数组思路分析&#xff1a;思路1&#xff1a;前缀和 哈希表 题目1&#xff1a;560.和为k的子数组 思路分析&#xff1a; 问题1&#xff1a;怎样找到数组所有子数组&#xff1f; 方式一&#xff1a;暴力枚举出来&#x…

AI模型部署:一文搞定Triton Inference Server的常用基础配置和功能特性

前言 Triton Inference Server是由NVIDIA提供的一个开源模型推理框架&#xff0c;在前文《AI模型部署&#xff1a;Triton Inference Server模型部署框架简介和快速实践》中对Triton做了简介和快速实践&#xff0c;本文对Triton的常用配置和功能特性做进一步的汇总整理&#xf…

基于springboot的美食推荐商城源码数据库

现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本美食推荐商城就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&#xff0…

对于隐形冠军企业来说,如何提升人力资源管理能力?

隐形冠军企业&#xff0c;是指在细分市场中默默耕耘、鲜为人知却极具竞争力的企业&#xff0c;正逐渐成为经济舞台上的重要力量。它们虽不像大型企业那样引人注目&#xff0c;但凭借其独特的产品、服务以及明确的战略定位&#xff0c;赢得了市场的青睐。由于这类企业规模不大&a…

Halcon C++ XLD 数据写入图片

1. xld转换为Region 生成与调用函数 gen_cross_contour_xld (CrossXld, Rows, UpdateCols, 6, 0) get_xld_region (CrossXld, xldRegions)函数实现 get_xld_region * 计算XLD个数 count_obj (BaseXld, Number) * 生成空的区域&#xff08;结果&#xff09; gen_empty_region…

STM32单片机选型方法

一.STM32单片机选型方法 1.首先要确定需求&#xff1a; 性能需求&#xff1a;根据应用的复杂度和性能要求&#xff0c;选择合适的CPU性能和主频。 内存需求&#xff1a;确定所需的内存大小&#xff0c;包括RAM和Flash存储空间。 外设需求&#xff1a;根据应用所需的功能&…

2024年社会发展与城市规划国际会议(SDUP 2024)

2024年社会发展与城市规划国际会议&#xff08;SDUP 2024&#xff09; 2024 International Conference on Social Development and Urban Planning 【重要信息】 大会地点&#xff1a;杭州 大会官网&#xff1a;http://www.iacsdup.com 投稿邮箱&#xff1a;iacsdupsub-conf.co…

vue3+优化vue-baidu-map中marker点过多导致的页面卡顿问题

场景: 移动端h5中&#xff0c;当我们需要在地图中展示很多marker点坐标的时候&#xff0c;通常会使用 bm-marker &#xff0c;去循环生成marker点&#xff0c;在数量不多的情况下是没问题的&#xff0c;但是随着数据量的增加&#xff0c;地图就会变得卡顿&#xff0c;以及渲染延…

mysql和redis的双写一致性问题

一&#xff0c;使用方案 在使用redis作为缓存的场景下&#xff0c;我们一般使用流程如下 二&#xff0c;更新数据场景 我们此时修改个某条数据&#xff0c;如何保证mysql数据库和redis缓存中的数据一致呢&#xff1f; 按照常规思路有四种办法&#xff0c;1.先更新mysql数据&a…

16、架构-可观测性-事件日志详细解析

事件日志 事件日志是记录系统运行期间发生的离散事件的关键工具。它们在系统的可观测性中起着至关重要的作用&#xff0c;帮助开发者和运维人员追踪、分析和解决系统问题。以下是对事件日志处理各个方面的详细解析&#xff0c;并结合具体的数据案例和技术支撑。 输出 日志输出…

如何优雅的删除正式环境中的大表

引起 MySQL 数据库性能抖动的原因有很多,比如大事务、定时批量查询等,而这些原因我们一般都会注意到。但是,有一个引起性能抖动的原因却经常被我们忽视,那就是在生产环境删除无用的大表,即 DROP TABLE。 一、为什么要 DROP TABLE? 生产环境中,为什么要 DROP TABLE?相…

周五美国股市总结,标普止步四日连涨,纳指五日连创新高,法股单周跌幅两年多最深

美国消费者信心意外下滑至七个月新低&#xff0c;通胀预期反弹&#xff0c;标普大盘脱离历史最高&#xff0c;道指连跌四日&#xff0c;罗素小盘股跌至六周新低&#xff0c;有分析称对经济担忧浮现。全周标普和纳指分别累涨1.6%和3.2%&#xff0c;都是八周里第七周上涨&#xf…

btstack协议栈实战篇--LE Peripheral - Delayed Response

btstack协议栈---总目录_bt stack是什么-CSDN博客 数据包处理器用于处理配对请求。 这里列出的是主要应用代码。它初始化了 L2CAP、安全管理器,并使用从 lecreditbasedflowcontrolmodeserver:gatt 生成的预编译 ATT 数据库来配置 ATT 服务器。最后,它配置广告…

mysql和redis备份和恢复数据的笔记

一、mysql的备份及恢复方法&#xff1a; 1.完全备份与恢复 1.1物理备份与恢复 物理备份又叫冷备份&#xff0c;需停止数据库服务&#xff0c;适合线下服务器 备份数据流程&#xff1a; 第一步:制作备份文件 systemctl stop mysqld #创建存放备份文件的目录 mkdir /bakdir …