Vue基础面试题(二)

news2025/3/3 4:45:48

文章目录

  • 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.coloradmin.cn/o/1822946.html

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

相关文章

现货白银实时交易平台的成长阶段 你出在哪个阶段?

很多人喜欢在现货白银平台上做模拟交易,因为他们认为现货白银实时交易平台上交易太痛苦了,不光随时会面临风险,而且还可能让自己出现大的亏损。如果投资者认为痛苦,那笔者觉得投资者不妨将在现货白银实时交易平台上做交易&#xf…

前端数据模拟Mock.js

新建mock-demo的项目,安装npm install mockjs 新建index.js //引入mockjs import Mock from mockjs //设置延迟时间 // Mock.setup({ // timeout:4000 // }) //使用mockjs模拟数据 Mock.mock(/product/search,{"ret":0,"data":{"mtim…

6年前端社招一个月上岸20K经历,附简历

面经哥只做互联网社招面试经历分享,关注我,每日推送精选面经,面试前,先找面经哥 本人普通本科6年前端经历,从年前开始准备跳槽,一开始感觉自己履历算不上突出,经历过迷茫和沮丧的时候&#xff0…

即时聊天系统

功能描述 该项目是一个前后端分离的即时聊天项目,前端采用vue2、后端使用springboot以mysql8.0作为数据库。 项目功能包含了单聊、群聊功能。在此基础上增加了对好友的功能操作,如备注设为通知、视频聊天、语音聊天、置顶、拉入黑名单、清空聊天记录等。…

小白如何入门编程?零基础入门指南,助你一步步成为编程达人!

零基础编程入门先学什么?编程语言有几百种,我们应该怎么选择。想学习编程,加入互联网行业,哪一个更有前途?在小白学习编程会有各种各样的问题,今天小编我就来为你解答。 一、程序员的类别 程序员从事的人…

Nginx部署Vue项目css文件能加载但是不生效

目录 问题描述问题解决 问题描述 Nginx部署打包后的Vue项目css文件能加载但是不生效, 问题解决 查看响应标头,发现不对劲, Content-Type: text/plain正确的应该是 Content-Type: text/css根本原因是nginx没有告诉浏览器正确的文件类型 所…

如何下载proDAD V4软件及详细安装步骤

简介: proDAD Adorage 是一款一体化的效果库,完美拥有所有的效果,集所有Adorage卷于一体,该系列包含13种可用套装中的17,000多种效果。 对于每种情况都能获得完美的效果,支持Adobe、avid、Corel、Cyberlink、MAGIX等多…

【Android】打开需要NDK的项目的一些报错的问题解决

文章简述 在打开一个新的项目的时候,遇到了一些问题,记录一下问题的解决步骤。 问题1 FAILURE: Build failed with an exception.* What went wrong: A problem occurred configuring project :app. > NDK not configured. Download it with SDK m…

redis 06 集群

1.节点,这里是把节点加到集群中的操作,跟主从结构不同 这里是在服务端使用命令: 例子: 2.启动节点 节点服务器 首先,先是服务器节点自身有一个属性来判断是不是可以使用节点功能 一般加入集群中的节点还是用r…

24K 纯干干干货:深入探讨 JavaScript 中变量相等性判断

比较两个变量是否相等,确切得说是内容是否相等,首先要划分为引用数据类型之间、基本数据类型之间和引用数据类型和基本数据类型之间(这一种使用场景比较少)这三种情形。因为引用数据类型和基本数据类型数据存储的方式是不一样的。…

AI模型究竟应该开源还是闭源?

随着人工智能技术的飞速发展,关于AI模型是否应该开源的问题引起了广泛关注。特别是最近Elon Musk对OpenAI及其领导层提起诉讼,指责其违背了开源的初心,这一争论变得更加激烈。在这篇博客中,我们将探讨开源与闭源AI模型的优缺点&am…

HTML制作一个太阳、地球、月球之间的绕转动画

大家好,今天制作一个太阳、地球、月球之间的绕转动画! 先看具体效果: 要制作一个太阳、地球、月球之间的绕转动画,我们需要结合HTML、CSS和JavaScript。由于CSS动画和JavaScript动画各有优缺点,这里我将给出一个使用…

【前端速通系列|第一篇】ES6核心语法

文章目录 1.ES6简介2.let和const3.解构4.链判断5.参数默认值6.箭头函数7.模板字符串8.Promise9.Async函数10.Await关键字11.模块化 1.ES6简介 ES6 是 ECMAScript 2015 的缩写,是 ECMAScript 语言标准的第6个版本。ECMAScript 是 JavaScript 语言的国际标准化组织制…

如何在3天内开发一个鸿蒙app

华为鸿蒙操作系统(HarmonyOS)自2.0版本正式上线以来,在短时间内就部署超过了2亿台设备,纵观全球操作系统的发展史,也是十分罕见的。与其他手机操作系统不同,HarmonyOS自诞生之日起,就是一款面向…

【vue】终端 常用代码 和其他注意

一、安装 以下全拿 qrcode.vue 举例 1. 搜版本 例子:搜 qrcode.vue的版本代码: npm view qrcode.vue versions 2.卸载 代码: npm uninstall qrcode.vue 3.安装 带版本 例子:安装 1.7.0 版本代码: npm i qrcode…

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

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

【LeetCode 92.】 反转链表 II

1.题目 虽然本题很好拆解,但是实现起来还是有一些难度的。 2. 分析 尽可能抽象问题,然后简化代码 我在写本题的时候,遇到了下面这两个问题: 没有把[left,right] 这个区间的链表给断开,所以导致反转起来非常麻烦。…

梁建章等Nature发表论文:混合办公使员工离职率下降1/3

近日,斯坦福大学 Nicholas Bloom、香港中文大学(深圳)经管学院韩若冰、携程集团联合创始人兼董事局主席梁建章,在国际顶尖学术期刊 Nature 上发表了题为:Hybrid working from home improves retention without damagin…

cad怎么导出jpg格式高清图?推荐三款心动软件!

在数字化设计领域,CAD(计算机辅助设计)软件已经成为不可或缺的工具。然而,很多时候我们需要将CAD设计以图片的形式进行分享或展示。如何将CAD设计导出为高清JPG格式图片呢?今天,我将为大家推荐三款令人心动…

流体性能测试实验室建设需求参考

在第一次提需求的时候,很多人感到很迷茫,这里以某流体实验室建设为例,进行说明,希望抛砖引玉,能起到一点参考作用。 一、项目概述 学校拟建一座流体性能测试实验室,旨在兼顾教学和企业科研能力。实验室需…