Vue基础面试题(二)

文章目录

  • 1.Vue 单页应用与多页应用的区别
  • 2.Vue template 到 render 的过程
  • 3. Vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染吗?
  • 4.Vue的优点
  • 5.vue如何监听对象或者数组某个属性的变化
  • 6.Vue模版编译原理
  • 7. 对SSR的理解
  • 8.Vue的性能优化有哪些
  • 9. 对 SPA 单页面的理解,它的优缺点分别是什么?
  • 10.MVVM的优缺点?
  • 11.说一下Vue的生命周期
  • 12.created和mounted的区别
  • 13.一般在哪个生命周期请求异步数据
  • 14.keep-alive 中的生命周期哪些
  • 15.组件通信方式
  • 16.路由的hash和history模式的区别
  • 17.如何获取页面的hash变化
  • 18.\$route 和$router 的区别
  • 19.params和query的区别
  • 20.对前端路由的理解
  • 21.Vuex 的原理
  • 22.vue中action和mutation的区别
  • 23.Vuex 和 localStorage 的区别
  • 23.Vuex有哪几种属性?

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

  • 单页面应用(SPA):指的是只有一个主页面的应用,一开始只需要加载一次css,js等相关资源,所有的内容都包含在主页面,对某一个功能模块进行组件化。单页面应用跳转,就是切换相关组件,仅仅是刷新局部资源。
  • 多页面应用(MPA):指有多个独立页面的应用,每个页面都必须重复加载js,css等相关资源。 多页面应用跳转,需要整页资源刷新。

区别

  • 刷新方式:单页面是局部刷新,多页面是整页刷新。
  • 路由模式:单页面可以使用hash或者history。多页面普通的链接跳转。
  • 用户体验:单页面应用用户体验良好,切换页面只是局部刷新,因为是一次性加载所有资源,首次进入会有一段时间白屏。多页面应用页面切换加载缓慢,流畅度不够,用户体验差。
  • 转场动画:单页面容易实现,多页面无法实现。
  • 数据传递:容易传递数据,比如vuex。多页面不方便,一般是url,cookie,本地存储
  • 结构:单页面是有一个主页面+许多模块组件。多页面是许多完整的页面。

2.Vue template 到 render 的过程

在这里插入图片描述

3. Vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染吗?

  • 不会立即同步执行,Vue更新DOM是异步执行的,监听到数据变化,会开启一个队列,缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入到队列一次,这样可以避免重复计算和DOM操作。然后在下一个事件循环中,Vue刷新队列并执行实际工作。

4.Vue的优点

  • 轻量级框架,简单易学。
  • 双向数据绑定,方便数据操作。
  • 视图数据结构分离,方便数据的更改。
  • 虚拟DOM操作,运行速度快,耗能低。

5.vue如何监听对象或者数组某个属性的变化

  • 直接设置数组的某一项值或者设置对象的属性值,页面不会发生变化,这是因为Object.defineProperty监听不到。
  • 解决方式:this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value);也可以调用数组的方法,Vue中重写了这些方法,使用这些方法操作数组视图会直接更新。

6.Vue模版编译原理

  • vue中的模板template无法被浏览器解析并渲染,需要将template转化成一个JavaScript函数,这样浏览器就可以执行这一个函数并渲染,这一个过程就是模板编译。
  • 具体过程:解析阶段->使用正则表达式对template字符串进行解析,将标签,指令,属性等转化为抽象语法树AST。然后遍历语法树。优化阶段:找到其中的静态节点进行标记,页面渲染时进行diff比较时直接跳过,优化性能。最后生成阶段将AST转化为render函数字符串。

7. 对SSR的理解

  • 服务端渲染,是将客户端把标签渲染成HTML文件的工作放在服务端来完成,然后再把html直接返回给客户端。
  • 优势:提供更好的搜索引擎优化(SEO),更快首次加载事件,更好的性能。
  • 缺点:开发条件会受到限制(服务器端只支持beforeCreate和Created两个钩子),更多的服务端负载。

8.Vue的性能优化有哪些

  • 编码优化:不要把所有数据都放在data中,使用v-for给每项元素绑定事件时用事件代理,使用keep-alive缓存组件,key保证唯一,合理使用路由懒加载,异步组件,使用防抖节流。
  • SEO优化:预渲染,服务端渲染SSR。
  • 用户体验:骨架屏,使用缓存优化(客户端缓存,服务端缓存)。
  • 打包优化:使用cdn加载第三方库,多线程打包。

9. 对 SPA 单页面的理解,它的优缺点分别是什么?

  • 仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;
  • 优点:用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;相对服务器压力小;前后端职责分离,架构清晰。
  • 缺点:初次加载耗时长,不能使用浏览器前进后退功能,搜索引擎优化(SEO)难度大。

10.MVVM的优缺点?

优点

  • 分离视图和模型,各个模块独立开发和测试,降低代码耦合。
  • 提供双向数据绑定机制,使得 Model 和 View 之间的数据自动同步。
  • 提高代码的可维护性,提高开发效率。

缺点

  • bug难调试:双向绑定导致bug不好定位。
  • 对于大型图形应用程序,视图状态较多,ViewModel的构建和维护的成本⽐较⾼。

11.说一下Vue的生命周期

  • beforecreate:在这个阶段属性和方法都不能使用
  • created:实例创建完成后,在这里完成了数据监测,可以使用数据,修改数据,不会触发updated,也不会更新视图。
  • beforemount:完成了模板的编译,虚拟DOM完成创建,即将渲染,修改数据,不会触发updated
  • mounted:把编译好的模板挂载到页面,这里可以发送异步请求也可以访问DOM节点。
  • beforeUpdate:组件数据更新之前使用,数据是新的,页面上的数据是旧的,组件即将更新,准备渲染,可以改数据。
  • updated:render函数重新做了渲染,这时数据和页面都是新的,避免在此更新数据。
  • beforedestroy:实例销毁前,在这里实例可以用,可以清除定时器等
  • destroyed:组件已经全部被销毁

使用keep-alive时多出两个生命周期:

  • actived:组件激活时
  • deactived:组件销毁时

12.created和mounted的区别

created:在渲染前调用,通常先初始化属性,然后做渲染。
mounted:在模板渲染后,一般是初始化页面,对元素的节点进行操作。
请求的数据对DOM有影响就使用created,请求数据对DOM无关就用mounted。

13.一般在哪个生命周期请求异步数据

  • 可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端返回的数据进行赋值。​
  • 推荐在created 钩子函数中调用异步请求,能够更快获取到服务端数据,减少页面加载时间。

14.keep-alive 中的生命周期哪些

  • keep-alive是Vue的一个内置组件,用来对组件进行缓存,防止重复渲染DOM。
  • 使用keep-alive多出两个生命周期,且beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁。
  • 当组件被换掉时,会被缓存到内存中、触发 deactivated 生命周期;当组件被切回来时,再去缓存里找这个组件、触发 activated钩子函数。

15.组件通信方式

  • props/$emit:父组件(通过v-bind简写 :来传递)通过props向子组件传递数据,子组件通过$emit(自定义事件)和父组件(用@v-on绑定事件)通信。
  • eventBus事件总线:适用于所有组件间通信,首先创建Eventbus管理中间组件通信。通过$emit发送事件,通过on接收事件。
  • 依赖注入:(父子组件也可以是祖孙,传递的数据是非响应式的):provide用来发送数据,inject用来接收数据。
  • ref/refs(父子通信):在子组件中使用ref,父组件就可以使用$refs访问子组件的实例,进而访问子组件的方法和属性。
  • $parent/$children:使用$parent访问父组件(上一级)的实例,使用children访问子组件的实例。
  • $attrs / $listeners(父组件传递到深层子组件):中间子组件绑定v-bind=“attrs” v-on="listeners"进行传递。

16.路由的hash和history模式的区别

vue项目只有一个html物理文件,切换页面时需要让访问的url路径发生变化,又不能触发html物理文件的重新加载。VueRouter为了支持单页面应用管理和页面跳转,提供了两种页面的跳转和加载。

  • hash的路由地址上有#号,history模式没有(更美观)。
  • 回车刷新的时候,如果没有后台正确配置,history会报错404,hash模式会正常加载页面。(浏览器解析时不会把hash部分发送到服务器)
  • hash模式支持低版本浏览器,history是H5新增的API。
  • hash不会重新加载页面,单页面应用必备。
  • history有历史记录(利用pushState()和replaceState()方法)

17.如何获取页面的hash变化

  • 使用watch监听$ route的变化
  • 直接读取window.location.hash的值,监听哈希变化

18.$route 和$router 的区别

是VueRouter提供的两个对象,分别代表路由对象和路由器实例。

  • $route是包含路由信息的对象,包含了当前路径,参数,查询参数,哈希。
    在这里插入图片描述
  • $router用于控制和操作路由,可以导航到不同的路由,进行添加和移出路由等操作。
    在这里插入图片描述

19.params和query的区别

  • query传递参数会在url后面用?连接起来,且参数之间用&&符号连接然后显示在页面的url中。
  • 在vue中使用query要搭配path路径,而params只能由命名路由name来引入。
  • 两者中query在刷新页面的时候参数不会消失 但params在刷新页面的时候参数会消失.
  • query传过来的参数会显示到地址栏中 而params传过来的参数不会显示到地址栏中(路径中声明了也会出现)

20.对前端路由的理解

  • 前端路由是在单页面应用中用来管理不同视图或组件之间导航的机制,它允许应用在不加载整个页面的情况下,通过URL的变化来切换和显示不同的内容。
  • 工作原理:通过监听浏览器 URL 的变化,来匹配预定义的路由规则,并渲染相应的视图或组件。
  • 路由模式分为hash模式和history模式
  • 使得单页应用可以在不刷新页面的情况下进行导航,提供更好的用户体验和更快的响应时间。它还支持浏览器的前进和后退功能。

21.Vuex 的原理

  • 创建一个集中数据存储的仓库,达到组件间数据共享的作用。
  • 5个核心概念
  • 适用场景:适用于大中型vue项目,适合管理复杂的状态和业务逻辑。

22.vue中action和mutation的区别

  • action提交的是mutation,而不是直接变更状态。用于处理异步操作或者包含业务逻辑的操作,例如API请求。
  • mutation是vuex中唯一可以直接修改状态的地方,处理同步状态的修改。
  • 在视图更新时,先触发actions,actions再触发mutation
  • mutation的参数是state

23.Vuex 和 localStorage 的区别

  • vuex存储在内存中,localstorage 则以文件的方式存储在本地,只能存储字符串类型的数据。
  • vuex用于组件之间的通信传值,localstorage是本地存储,是将数据存储到浏览器的方法,一般是在跨页面传递数据时使用 。Vuex能做到数据的响应式,localstorage不能。
  • 刷新页面时vuex存储的值会丢失,localstorage不会。

23.Vuex有哪几种属性?

有五种,分别是 State、 Getter、Mutation 、Action、 Module
在这里插入图片描述

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

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

相关文章

实验五 网络中的树

文章目录 5.1 网络中的树第一关 认识树相关知识编程要求代码文件 第2关 根节点的二阶邻居求解方法相关知识编程要求代码文件 第3关 根节点的n阶邻居求解方法相关知识 5.2 权值矩阵与环(无向网络)第1关 无向网络的权值矩阵相关知识编程要求代码文件 第2关…

【机器学习】神经网络与深度学习:探索智能计算的前沿

前沿 神经网络:模拟人类神经系统的计算模型 基本概念 神经网络,又称人工神经网络(ANN, Artificial Neural Network),是一种模拟人类神经系统结构和功能的计算模型。它由大量神经元(节点)相互连…

docker环境中配置phpstorm php xdebug调试工具

本文介绍通过docker compose的使用方式 第一步:在php镜像中安装phpxdebug扩展,比如php7.4对应的是xdebug3.1.6 第二步:设置项目中的docker-compose.yml docker-compose 增加开启xdebug的环境变量,host.docker.internal是宿主机的地址&#…

Kettle根据分类实现Excel文件拆分——kettle开发31

将整理好的一份供应商付款明细Excel文件,按供应商拆分成多个Excel文件。 实现思路 本文我们首先将供应商付款明细表,按照“名称”拆分成多份Excel文件。拆分Excel文件打算用两个转换实现,一个用来将Excel数据读取到参数中,另外一…

Internet Download Manager(IDM6.41)安装教程+软件安装包下载

IDM是一款多线程下载工具,全称InternetDownloadManager。IDM的多线程加速功能,能够充分利用宽带,所以下载速度会比较快,而且它支持断点续传。它的网站音视频捕获、站点抓取、静默下载等功能,也特别实用。 安 装 包 获 …

图像的几何变换之平移

文章目录 前言需求代码运行结果图 前言 图像的几何变换是一个再基础不过的知识点,包括等距变换,相似变换,仿射变换和投影变换。图像的几何变换是指对图像的位置,尺寸,大小,形状和投影进行变换,…

采集设置记录

采集设置: 1.任务添加 2.采集器设置 采集器设置之规则采集

OpenCV滤波器

滤波的作用 一副图像通过滤波器得到另一副图像;其中滤波器又称为卷积核,滤波的过程称为卷积。 图像卷积效果图 卷积的过程 一 卷积的几个基本概念 1 卷积核的大小 卷积核一般为奇数,如3X3,5X5,7X7等。 一方面是增加padding的原因。 另一…

activiti(一)-相关概述及相关表的定义

官网 1、概述 Activiti 是一个开源的、以 Java 为中心的业务流程管理(BPM)平台,旨在帮助企业自动化和管理复杂的业务流程。其核心功能包括工作流管理、任务分配、事件处理、流程监控和集成等。 1.1、主要功能和特点 流程设计和建模&#…

GaussDB技术解读——GaussDB架构介绍(三)

目录 9 智能关键技术方案 智能关键技术一:自治运维系统 智能关键技术二:库内AI引擎 智能关键技术三:智能优化器 10 驱动接口关键技术方案 GaussDB架构介绍(二)从数据持久化存取层(DataNode)关键技术方案、全局事…

Druid未授权访问漏洞修复

前言 安全组针对系统漏扫发现系统存在Druid未授权访问,会引发泄露系统敏感信息,漏洞链接为ip:端口/druid/index.html,可以清楚的查看数据库的相关连接信息,如下图所示: 漏洞修复 1、关闭Druid监控页面 在Druid的配…

右值引用和移动语义

什么是左值?什么是右值? 通俗来讲,可以出现在赋值语句左侧的,为左值;只能出现在赋值语句右侧的,为右值。 左值与右值的本质区别在于:左值能取地址,但右值不能。 本文主要通过三个场景…

使用星鸾云GPU云服务器搭配Jupyter Lab,创建个人AI大模型

最近我们公司IT部门宣布了一个大事情,他们开发了一款内部用的大模型,叫作一号AI员工(其实就是一个聊天机器人),这个一号员工可以回答所有关于公司财务、人事、制度、产品方面的问题。 我问了句:公司加班有…

GMT6绘制北半球

设置绘制区域及投影方式 投影方式选择立体等角投影,在GMT6中的命令是-Js # 定义区域变量和投影变量,纬度从北纬30度到极点 region-180/180/30/90 projection0/90/1:60000000 gmt set PROJ_ELLIPSOID WGS-84定义CPT及地形展示 现在定义一个CPT用于显示…

欧式家居官网源码系统-轻奢大气设计风格

一款家居家私的官方网站系统,设计轻奢大气。 前端内容均可通过后台修改。当然你也可以用于其他行业的官网使用,只要你喜欢这个设计。 大致功能: 1、会员系统 2、支付功能 3、标签功能 4、熊掌号提交功能 5、文章发布功能 6、SEO设置功能 7、多…

[学习笔记] VFX Silhouette

目录 Part 1 : The interface of Silhouettte (Silhouette的界面介绍) Part 2: The shape divisions and manual roto(形状分区和手动roto工作): Part 3: tracking : Part 4: Mocha Tracking Part 5: Motion Blur(…

【单片机毕业设计选题24004】-基于STM32和阿里云的智能鱼缸控制系统

系统功能: 此设计采用STM32单片机将采集到的环境温度,TDS值,PH值等显示在OLED上,并将这些信息上报至阿里云平台。系统可通过阿里云平台或按键开关加热继电器,增氧继电器,水泵继电器和舵机. 主要功能模块原理图: 电源时钟烧录接口: 单片机和按键输入电路: 继电器控…

vscode插件开发之 - menu配置

上一遍博客介绍了如何从0到1搭建vscode插件开发的base code,这遍博客将重点介绍如何配置menu。通常,开发一款插件,会将插件显示在VSCode 左侧的活动栏(Activity Bar),那么如何配置让插件显示在Activity Bar…

香橙派鲲鹏Pro(orange pi kunpeng) 开箱测试,和在娱乐功能(电视盒子),深度机器学习应用方面的测试报告

摘要 对Orange Pi kunpeng这个开发板进行综合评测,特别关注其作为电视盒子的性能以及在深度学习应用中的算力和稳定性。通过一个月的测试,我们评估了其硬件性能、软件兼容性、用户体验和实际应用潜力 引言 5月份,我收到了csdn 对Orange P…

LabVIEW阀性能测试平台

项目背景 公司需要开发一套综合测试平台,用于测试汽车气压制动系统控制装置和调节装置的性能。测试平台需满足QC/T标准,并实现多项测试功能,包括密封性测试、静特性测试、动态特性测试等。公司要求系统基于LabVIEW开发,以便于与现…