面试官:Vue中的过滤器了解吗?过滤器的应用场景有哪些?
面试官: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 ( ...
面试官:v-if和v-for的优先级是什么?
面试官: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 是什么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 ...
面试官:SPA首屏加载速度慢的怎么解决?
面试官: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( ...
面试官:你知道vue中key的原理吗?说说你对它的理解
面试官:你知道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这两个生命周期中请求数据有什么区别呢?
面试官:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?
一、生命周期是什么生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作PS:在Vue生命周期钩子会自动绑定 this 上下文到实例中,因此你可以访问数据,对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())
二、生命周期有哪些Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后,以及一些特殊场景的生命周期
生命周期
描述
beforeCreat ...
面试官:说说你对vue的mixin的理解,有什么应用场景?
面试官:说说你对vue的mixin的理解,有什么应用场景?
一、mixin是什么Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类
Mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂
Vue中的mixin先来看一下官方定义
mixin(混入),提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。
本质其实就是一个js对象,它可以包含我们组件中任意功能选项,如data、components、methods 、created、computed等等
我们只要将共用的功能以对象的方式传入 mixins选项中,当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来
在Vue中我们可以局部混入跟全局混入
局部混入定义一个mixin对象,有组件options的data、methods属性
12345678910var myMixin = { created: function () { this.hello() }, ...
面试官:Vue常用的修饰符有哪些有什么应用场景
面试官:Vue常用的修饰符有哪些有什么应用场景
一、修饰符是什么在程序世界里,修饰符是用于限定类型以及类型成员的声明的一种符号
在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理
vue中修饰符分为以下五种:
表单修饰符
事件修饰符
鼠标按键修饰符
键值修饰符
v-bind修饰符
二、修饰符的作用表单修饰符在我们填写表单的时候用得最多的是input标签,指令用得最多的是v-model
关于表单的修饰符有如下:
lazy
trim
number
lazy在我们填完信息,光标离开标签的时候,才会将值赋予给value,也就是在change事件之后再进行信息同步
12<input type="text" v-model.lazy="value"><p>{{value}}</p>
trim自动过滤用户输入的首空格字符,而中间的空格不会过滤
1<input type="text& ...
面试官:Vue中的$nextTick有什么作用?
面试官:Vue中的$nextTick有什么作用?
一、NextTick是什么官方对其的定义
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
什么意思呢?
我们可以理解成,Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新
举例一下
Html结构
1<div id="app"> {{ message }} </div>
构建一个vue实例
123456const vm = new Vue({ el: '#app', data: { message: '原始值' }})
修改message
123this.message = '修改后的值1'this.message = '修改后的值2'this.message = '修改 ...
面试官:Vue.observable你有了解过吗?说说看
面试官:Vue.observable你有了解过吗?说说看
一、Observable 是什么Observable 翻译过来我们可以理解成可观察的
我们先来看一下其在Vue中的定义
Vue.observable,让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象
返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器
1Vue.observable({ count : 1})
其作用等同于
1new vue({ count : 1})
在 Vue 2.x 中,被传入的对象会直接被 Vue.observable 变更,它和被返回的对象是同一个对象
在 Vue 3.x 中,则会返回一个可响应的代理,而对源对象直接进行变更仍然是不可响应的
二、使用场景在非父子组件通信时,可以使用通常的bus或者使用vuex,但是实现的功能不是太复杂,而使用上面两个又有点繁琐。这时,observable就是一个很好的选择
创建一个js文件
12345678910111213141 ...