前端日记

面试官：动态给vue的data添加一个新的属性时会发生什么？怎样解决？ 一、直接添加属性的问题我们从一个例子开始 定义一个p标签，通过v-for指令进行遍历 然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行 1234<p v-for="(value,key) in item" :key="key"> {{ value }}</p><button @click="addProperty">动态添加新属性</button> 实例化一个vue实例，定义data属性和methods方法 1234567891011121314const app = new Vue({ el:"#app", data:()=>{ item:{ oldProperty:"旧属性" &# ...

面试官：你了解vue的diff算法吗？说说看 一、是什么diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff 算法在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 二、比较方式diff整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循环从两边向中间收拢 下面举个vue通过diff算法更新的例子： 新旧VNode节点如下图所示： 第一次循环后，发现旧节点D与新节点D相同，直接复用旧节点D作为diff后的第一个真实节点，同时旧节点endIndex移动到C，新节点的 startIndex 移动到了 C 第二次循环后，同样是旧节点的末尾和新节点的开头(都是 C)相同，同理，diff 后创建了 C 的真实节点插入到第一次创建的 D 节点后面。同时旧节点的 endIndex 移动到了 B，新节点的 startIndex 移动到了 E 第三次循环中，发现E没有找到，这 ...

面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？ 一、什么是指令开始之前我们先学习一下指令系统这个词 指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力 在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统 我们看到的v- 开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令 指令使用的几种方式： 1234567891011121314//会实例化一个指令，但这个指令没有参数 `v-xxx`// -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"``v-xxx="'string'"` // -- 传参数（`arg`），如`v-bind:class=" ...

面试官：你是怎么处理vue项目中的错误的？ 一、错误类型任何一个框架，对于错误的处理都是一种必备的能力 在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。 主要的错误来源包括： 后端接口错误 代码中本身逻辑错误 二、如何处理后端接口错误通过axios的interceptor实现网络请求的response先进行一层拦截 12345678910111213apiClient.interceptors.response.use( response => { return response; }, error => { if (error.response.status == 401) { router.push({ name: "Login" }); } else { message.error("出错了"); return Promise.r ...

面试官：Vue中的过滤器了解吗？过滤器的应用场景有哪些？ 一、是什么过滤器（filter）是输送介质管道上不可缺少的一种装置 大白话，就是把一些不必要的东西过滤掉 过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数 Vue 允许你自定义过滤器，可被用于一些常见的文本格式化 ps: Vue3中已废弃filter 二、如何用vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： 12345<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div> 定义filter在组件的选项中定义本地的过滤器 1234567filters: { capitalize: function ( ...

面试官：SPA首屏加载速度慢的怎么解决？ 一、什么是首屏加载首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容 首屏加载可以说是用户体验中最重要的环节 关于计算首屏时间利用performance.timing提供的数据： 通过DOMContentLoad或者performance来计算出首屏时间 123456789101112131415// 方案一：document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting');});// 方案二：performance.getEntriesByName("first-contentful-paint")[0].startTime// performance.getEntriesByName( ...

面试官：v-if和v-for的优先级是什么？ 一、作用v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化 两者在用法上 12345<Modal v-if="isShow" /><li v-for="item in items" :key="item.id"> {{ item.label }}</li> 二、优先级v-if与v-for都是vue模板系统中的指令 在vue模板编译的时候，会将指令系统转化成可执行的render函数 示例编写一个p标签，同时使用v-if与 v-for 12345<div id ...

面试官：说说你对keep-alive的理解是什么？ 一、Keep-alive 是什么keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 keep-alive可以设置以下props属性： include - 字符串或正则表达式。只有名称匹配的组件会被缓存 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存 max - 数字。最多可以缓存多少组件实例 关于keep-alive的基本用法： 123<keep-alive> <component :is="view"></component></keep-alive> 使用includes和exclude： 12345678910111213<keep-alive include="a,b"> <component :is="view"></comp ...

面试官：你知道vue中key的原理吗？说说你对它的理解 一、Key是什么开始之前，我们先还原两个实际工作场景 当我们在使用v-for时，需要给单元加上key 123<ul> <li v-for="item in items" :key="item.id">...</li></ul> 用+new Date()生成的时间戳作为key，手动强制触发重新渲染1<Comp :key="+new Date()" /> 那么这背后的逻辑是什么，key的作用又是什么？ 一句话来讲 key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点 场景背后的逻辑当我们在使用v-for时，需要给单元加上key 如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。 如果使用了key，Vue会根据keys的 ...

面试官：请描述下你对vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？ 一、生命周期是什么生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作PS：在Vue生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos()) 二、生命周期有哪些Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期 生命周期 描述 beforeCreat ...