VUE：常见的面试题和答案

news2024/12/30 2:04:29

1. Vue组件的生命周期有哪些，它们的执行顺序是什么?

答：Vue组件的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等。它们的执行顺序如下：

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed。

2. 什么是计算属性，它和方法有什么区别?

答：计算属性(computed)是Vue中的一个属性，它是一个函数，根据响应式的数据进行计算返回结果。计算属性可以多次使用，并且当计算属性所依赖的响应式数据改变时会重新计算，避免了不必要的计算。而方法(methods)则需要手动调用，无法自动触发并且不能被缓存，所以当方法所依赖的数据需要更新时需要手动调用。

3. VueRouter的路由模式有哪几种？

答: VueRouter路由模式有三种：hash模式、history模式和abstract模式。hash模式使用URL的hash（#）来模拟一个完整的URL，当URL有变化时，页面不会重新加载，而是通过hashchange事件监听到URL的变化，然后通过hash来实现视图的更新；history模式使用HTML5的History API来进行URL跳转，通过pushState和replaceState方法可以动态改变浏览器的URL，而不需要刷新页面；abstract模式将路由进行抽象，不依赖于浏览器的URL，主要用于非浏览器环境下的应用。

4. 什么是Vuex，它的作用是什么?

答：Vuex是Vue的状态管理库，它将组件的共享状态抽取出来，以一个全局单例模式进行管理，使得多个组件可以共享同一状态。Vuex包含了状态管理、状态获取、状态修改、同步数据和异步数据管理等功能，它的作用是方便了组件之间的数据交互，特别是在大型复杂应用中非常有用。

5. 什么是Vue的父子组件传值，有哪些传值方式？

答：父子组件传值是指在Vue组件中，通过组件之间的数据传递方式，让父组件向子组件传递数据或者让子组件向父组件传递数据。Vue的父子组件传值方式有props、 a t t r s 、 attrs、 attrs、listeners、v-bind和v-on等，其中props是最常用的一种方式，它可以向子组件传递数据并且可以设置数据类型、默认值和校验等。 a t t r s 和 attrs和 attrs和listeners则是用于解决父组件向子组件传递不符合规范的属性和监听事件。v-bind和v-on是Vue的两个指令，用于绑定属性和事件，可以实现父组件向子组件传递数据和接收子组件的事件。

6. Vue 的优点是什么？

答：Vue 的主要优点是具有简单易学、高效、灵活、功能强大的特点，可以实现组件化、模块化、响应式编程、指令系统、过滤器等功能。

7. Vue 框架中是否有 MVC 的思想？

答：是的，Vue 框架本身就具有 MVVM 思想（将 Model、View、ViewModel 分离），并且通过数据绑定的方式实现了数据与视图的同步。

8. Vue 中的组件通信有哪些方式？

答：Vue 中的组件通信有父子组件通信、兄弟组件通信、跨越多级组件的祖孙组件通信、任意组件之间的通信，可以使用 props、、
emit、refs、事件中心、Vuex 等方法进行实现。

9. nextTick方法有什么作用？

答：nextTick 方法可以用于在 DOM 更新后对页面进行操作，在 Vue 生命周期中的 updated 阶段完毕后执行回调函数，确保数据已经更新的情况下再进行操作。

10. Vue 中的 v-model 指令有什么作用？

答：v-model 指令可以完成双向数据绑定，即实时将用户在输入框中输入的值绑定到 Vue 数据模型中，并且在 Vue 数据模型中的数据发生变化时，可以自动同步到输入框中。

11. Vue 中的 mixin 有什么作用？

答：mixin 可以通过复用已有的 Vue 实例对象中的选项，比如 data、methods、components 等，来增强 Vue 实例的功能。mixin 可以用于扩展多个组件之间的公共逻辑，降低代码的重复度

12. computed 和 watch 的区别和运用的场景？

答：computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：
当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

13. v-show 与 v-if 有什么区别？

答：v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。
所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

14. 在哪个生命周期内调用异步请求？

答：可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：
能更快获取到服务端数据，减少页面 loading 时间；

ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

15. 在什么阶段才能访问操作DOM？

答：在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。

16. 你有对 Vue 项目进行哪些优化？

（1）代码层面的优化

  • v-if 和 v-show 区分使用场景

  • computed 和 watch 区分使用场景

  • v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

  • 长列表性能优化

  • 事件的销毁

  • 图片资源懒加载

  • 路由懒加载

  • 第三方插件的按需引入

  • 优化无限列表性能

  • 服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

  • Webpack 对图片进行压缩

  • 减少 ES6 转为 ES5 的冗余代码

  • 提取公共代码

  • 模板预编译

  • 提取组件的 CSS

  • 优化 SourceMap

  • 构建结果输出分析

  • Vue 项目的编译优化

（3）基础的 Web 技术的优化

  • 开启 gzip 压缩

  • 浏览器缓存

  • CDN 的使用

  • 使用 Chrome Performance 查找性能瓶颈

17. Vue 组件间通信有哪几种方式？

答：Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。
Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，以下通信分类：

  • props / $emit 适用 父子组件通信
  • ref 与 $parent / $children 适用 父子组件通信
  • EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信
  • a t t r s / attrs/ attrs/listeners 适用于 隔代组件通信
  • provide / inject 适用于 隔代组件通信
  • Vuex 适用于 父子、隔代、兄弟组件通信

18.vue实现双向数据绑定

答：vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

19. 绑定 class 的数组用法

  • 对象方法 v-bind:class=“{‘orange’: isRipe, ‘green’: isNotRipe}”
  • 数组方法v-bind:class=“[class1, class2]”
  • 行内 v-bind:style=“{color: color, fontSize: fontSize+‘px’ }”

20. v-for 与 v-if 的优先级

答：v-for的优先级比v-if高

21. vue-router有哪几种路由守卫?

  • 全局守卫：beforeEach
  • 后置守卫：afterEach
  • 全局解析守卫：beforeResolve
  • 路由独享守卫：beforeEnter

22. vuex五大核心分别是干什么的

  • state：Vuex中的基本数据，辅助函数mapState

  • getters：即从store的state中派生出的状态，有点类似计算属性，辅助函数mapGetters

  • mutations：是更改Vuex中的store中的状态的唯一方法，是同步的，辅助函数mapMutations

  • actions：Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。辅助函数mapActions

  • Modules：Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutations、actions、getters、甚至是嵌套子模块——从上至下进行类似的分割

23. 使用过 Vue SSR 吗？说说 SSR

答：SSR 也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端完成，然后再把 html 直接返回给客户端。

优点：

SSR 有着更好的 SEO、并且首屏加载速度更快

缺点： 开发条件会受到限制，服务器端渲染只支持 beforeCreate 和 created 两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于 Node.js 的运行环境。

服务器会有更大的负载需求

24. vue 中使用了哪些设计模式

  • 工厂模式 - 传入参数即可创建实例

  • 单例模式 - 整个程序有且仅有一个实例

  • 发布 - 订阅模式 (vue 事件机制)

  • 观察者模式 (响应式数据原理)

  • 装饰模式: (@装饰器的用法)

  • 策略模式 策略模式指对象有某个行为, 但是在不同的场景中, 该行为有不同的实现方案 - 比如选项的合并策略

25. nextTick 使用场景和原理

答：nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法

相关代码如下

let callbacks = [];
let pending = false;
function flushCallbacks() { 
 pending = false;    
  for (let i = 0; i < callbacks.length; i++) { 
     callbacks[i]();  
     }}
     let timerFunc; 
     if (typeof Promise !== "undefined") { 
        const p = Promise.resolve(); 
         timerFunc = () => { 
            p.then(flushCallbacks); 
             };
             } else if (typeof MutationObserver !== "undefined") {
                 let counter = 1; 
                 const observer = new MutationObserver(flushCallbacks);
                 const textNode = document.createTextNode(String(counter));  			    observer.observe(textNode, {    characterData: true,  });
                 timerFunc = () => {    counter = (counter + 1) % 2;
                 textNode.data = String(counter);  };
                 } else if (typeof setImmediate !== "undefined") {
                    timerFunc = () => {    setImmediate(flushCallbacks);  
                    };
                    } else {
                        timerFunc = () => {    setTimeout(flushCallbacks, 0);  
                        };
   }
export function nextTick(cb) {
       callbacks.push(cb);  
       if (!pending) {       
        pending = true;    timerFunc();  
        }
    }

nextTick 原理详解传送门

26. 简单谈谈你对vue3.0的理解

  • vue3.0和vue2.0最大的区别就是api从原来的options API 变成了 composition API + options API ，编写代码更灵活、复用率更高。

  • vue3.0比vue2.0快2倍，Tree-shaking 更友好

  • vue3.0支持TypeScript以及PWA

  • 数据双向绑定从Object.defineProperty变成了 new Proxy，不用再使用$set了

  • 其他方面的更改：支持自定义渲染器、支持 Fragment和 Protal组件等。

27. axios 是什么，其特点和常用语法是什么？

答：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。前端最流行的 ajax 请求库，react/vue 官方都推荐使用 axios 发 ajax 请求
特点:

  • 基于 promise 的异步 ajax 请求库，支持promise所有的API
  • 浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests
  • 支持请求／响应拦截器
  • 支持请求取消
  • 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
  • 批量发送多个请求
  • 安全性更高，客户端支持防御 XSRF，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略

28. 为什么使用虚拟DOM

  • 创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。

  • 触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。

  • 虚拟dom由于本质是一个js对象，因此天生具备跨平台的能力，可以实现在不同平台的准确显示。

  • Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具备了现代框架应有的高级特性。
    在这里插入图片描述

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

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

相关文章

21从零开始学Java之while与do-while循环的用法有什么不同？

21从零开始学Java之while与do-while循环的用法有什么不同？

作者&#xff1a;孙玉昌&#xff0c;昵称【一一哥】&#xff0c;另外【壹壹哥】也是我哦 千锋教育高级教研员、CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者 前言 在上一篇文章中&#xff0c;壹哥给大家讲解了循环的概念&#xff0c;并重点给大家讲解了for循环的使用…
阅读更多...
腾讯轻联流程运行错误如何排查问题？

腾讯轻联流程运行错误如何排查问题？

我们在使用腾讯轻联时&#xff0c;会发现有些流程并没有运行成功&#xff0c;例如我们希望数据可以及时同步到腾讯文档&#xff0c;流程也有执行&#xff0c;但是却执行失败了&#xff0c;那么如何排查问题呢&#xff1f; 其中有几类常见问题 1. 流程不运行的问题请查看&…
阅读更多...
【WCH】基于STM32F1标准库程序烧录到CH32F203中运行方法

【WCH】基于STM32F1标准库程序烧录到CH32F203中运行方法

【WCH】基于STM32标准库程序烧录到CH32F203中运行方法&#x1f4cc;相关篇《关于CH32F203程序下载方式说明》 ✨看到CH32F203手册上写的该芯片也是ARM Cortex-M3内核&#xff0c;那么上层代码应该也是兼容的&#xff0c;为例证实这一点&#xff0c;开干&#xff0c;先来一个简单…
阅读更多...
C++---状态机模型---大盗阿福（每日一道算法2023.4.11）

C++---状态机模型---大盗阿福（每日一道算法2023.4.11）

注意事项&#xff1a; 建议先了解状态机的基本定义&#xff1a;状态机-百度百科。 题目&#xff1a; 阿福是一名经验丰富的大盗。趁着月黑风高&#xff0c;阿福打算今晚洗劫一条街上的店铺。 这条街上一共有 N 家店铺&#xff0c;每家店中都有一些现金。 阿福事先调查得知&…
阅读更多...
实验手册 - 第8周DataFrame API/Spark SQL

实验手册 - 第8周DataFrame API/Spark SQL

目录标题实验1实验内容绘制散点图将数据保存到MySQL# import os # os.getcwd() import findspark findspark.init() from pyspark.sql import SparkSessionspark SparkSession.builder.getOrCreate()实验1 实验内容 通过DataFrame API或者Spark SQL对数据源进行修改列类型、…
阅读更多...
malloc hook进行内存泄漏检测

malloc hook进行内存泄漏检测

记录下使用malloc的hook形式&#xff0c;写个小的demo&#xff0c;并记录遇到的问题 1. 实现代码&#xff1a; CMakeLists.txt和相应的memory_leak.cpp文件 cmake_minimum_required(VERSION 3.14) project(demo)set(_SRCmemory_leak.cpp)add_library(memory_leak SHARED ${_S…
阅读更多...
不要轻视Facebook Messenger的客户服务

不要轻视Facebook Messenger的客户服务

大多数现代品牌都意识到&#xff0c;在客户最活跃的数字渠道中保持活跃至关重要。如今全球有超过 2亿人使用社交消息应用程序与他人在线联系。特别是Facebook Messenger&#xff0c;每月有1亿用户 -占世界人口的3%&#xff01; 有这么多人使用Facebook Messenger&#xff0c;通…
阅读更多...
UE5.1.1创建C++工程失败解决办法

UE5.1.1创建C++工程失败解决办法

闲来无事&#xff0c;更新了一下UE5.1.1&#xff0c;妈蛋创建C项目居然失败&#xff0c; 错误截图如下&#xff1a; 妈蛋&#xff0c;后面一堆乱码&#xff0c;鬼知道是啥错误&#xff01; 咋解决&#xff1f;步步高打火机&#xff0c;直接复制第一段的Running后面的代码到cmd…
阅读更多...
仿真创新大赛—国三省一 智能鱼缸（proteus）（stm32）

仿真创新大赛—国三省一 智能鱼缸（proteus）（stm32）

⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩去年下半年参加了全国仿真创新大赛&#xff0c;也是取得了国赛三等奖&#xff0c;省赛一等奖的好成绩。 ⏩本篇文章对我们的参赛作品《智能鱼缸》做一个简介。 ⏩感…
阅读更多...
UE4/5多人游戏详解(加入游戏会话，数值key和value，寻找IP地址)

UE4/5多人游戏详解(加入游戏会话，数值key和value，寻找IP地址)

目录 加入游戏会话 找到会话 加入会话 代码&#xff1a; 设置会话key和value 代码&#xff1a; 在寻找会话中添加匹配&#xff1a; 代码&#xff1a; 寻找IP地址&#xff1a; 代码&#xff1a; 回调函数onJoinSessionComplete实现&#xff1a; 代码&#xff1a; 测试…
阅读更多...
分立机器基站接入核心网并调试可用解决之路

分立机器基站接入核心网并调试可用解决之路

问题描述 在两台机器上&#xff0c;分别为服务器A与主机B&#xff0c;其中服务器A上部署OAI核心网&#xff0c;主机B上部署容器版ueransim。两机器用一根网线连接。两台机器的连接如此&#xff1a;但是ueransim无法接入核心网。 解决思路1——机器网卡设置到192.168.70.0网段…
阅读更多...
常用AI网站精简版

常用AI网站精简版

1.ChatGPT:ChatGPThttps://chat.openai.com/ 2.Discord社区:(AI绘图midjourney)Discord | Midjourney AI生图https://discord.com/channels/@me3.文心一言：
阅读更多...
套利策略样本外跟踪

套利策略样本外跟踪

量化策略开发&#xff0c;高质量社群&#xff0c;交易思路分享等相关内容 『正文』 ˇ 专享策略No.2 | 商品股指通用套利策略(一) 日线版本&#xff1a; 15分钟版本&#xff1a; 专享02模型开发步骤&#xff1a; 1.计算套利品种价比的高开低收&#xff0c;不是价差。 2.计…
阅读更多...
231：vue+openlayers绘制点、点击此点弹出坐标复制和取消功能

231：vue+openlayers绘制点、点击此点弹出坐标复制和取消功能

第231个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers项目绘制点、点击此点弹出坐标复制和取消功能，这里面的复制功能采用了ue-clipboard2插件。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果 示例效果 配置方式 1）查看基础设置：ht…
阅读更多...
【数据挖掘与商务智能决策】第八章 K近邻算法

【数据挖掘与商务智能决策】第八章 K近邻算法

第八章 K近邻算法 1.K近邻算法简单代码演示 import pandas as pd df pd.read_excel(葡萄酒.xlsx) df原始样本酒精含量(%)苹果酸含量(%)分类0样本15201样本26102样本34103样本48314样本51021 # 特征变量和目标变量的切分 X_train df[[酒精含量(%),苹果酸含量(%)]] y_train …
阅读更多...
安灯电子看板实时反馈产线上的生产状态

安灯电子看板实时反馈产线上的生产状态

安灯电子看板是一种用于显示生产线运行情况的电子显示设备。它可以实时显示生产线的运行状态、异常信息以及工人的呼叫请求等信息&#xff0c;以便管理人员及时采取措施&#xff0c;保证生产线的正常运行。 安灯电子看板可以实现对生产线上各个环节的实时监控&#xff0c;并能够…
阅读更多...
AutoGPT使用

AutoGPT使用

windows和mac都可以使用 1&#xff0c;安装python 10 https://www.tutorialspoint.com/how-to-install-python-in-windows 2&#xff0c;下载AutoGPT代码 通过git克隆AutoGPT项目&#xff0c;git clone https://github.com/Torantulino/Auto-GPT.git如果没有安装git的同学就…
阅读更多...
SalesForce-第一篇-概述

SalesForce-第一篇-概述

1. 直接一点&#xff0c;一上来就上图吧&#xff0c;这个是系统的前端页面&#xff0c;分为三个部分&#xff1a; 顶部的菜单栏&#xff0c;左下部的详细信息栏&#xff0c;以及右部相关信息栏位&#xff1b; 略微详细的为&#xff1a; a. 用户信息部分&#xff1b; b. 应用…
阅读更多...
UDP套接字编程

UDP套接字编程

文章目录一、IP地址和端口号二、网络字节序三、socket编程接口1.socket常见API2.sockaddr结构四、UDP套接字1.简单认识UDP协议2.利用UDP套接字实现网络版本大小写转换(1)服务端(2)客户端一、IP地址和端口号 IP协议目前有两个版本&#xff0c;分别是IPV4和IPV6&#xff0c;IP地…
阅读更多...
【已解决】加载模型时报错：model_config = json.loads(model_config.decode(‘utf-8‘))

【已解决】加载模型时报错：model_config = json.loads(model_config.decode(‘utf-8‘))

Author&#xff1a;AXYZdong 硕士在读 工科男 有一点思考&#xff0c;有一点想法&#xff0c;有一点理性&#xff01; 定个小小目标&#xff0c;努力成为习惯&#xff01;在最美的年华遇见更好的自己&#xff01; CSDNAXYZdong&#xff0c;CSDN首发&#xff0c;AXYZdong原创 唯…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023