2021-06-30

VUE面试题系列01

1、v-show 与 v-if 有什么区别?
相同点:
v-show和 v-if都是 控制 dom元素 的 显示和隐藏 的。

不同点:
1、原理:

​ v-show是通过控制元素的样式属性display的值,来完成显示和隐藏;
​ v-if是通过对dom元素的添加和删除,完成显示和隐藏

​ 2、使用场景:由原理(做法)得出使用场景的区别

​ v-show:使用在dom元素频繁切换的场景
​ v-if:当dom元素的切换不频繁,可以使用。特别是,首次元素处于隐藏的情况下。
2、说说你对 SPA 单页面的理解,它的优缺点分别是什么?
1)、首先:

SPA的英文是single-page application ,也就是说整个项目中只有一个页面。

​ 单页面应用的实现思路: 就是在 Web 页面初始化时加载所有的 HTML、JavaScript 和 CSS,页面的内容的变化,靠动态操作DOM。

2)、其次,

说说它的优点和缺点:

它的优点有三点:

​ 第一点:局部刷新。用户体验好、快,内容的改变不需要重新加载整个页面。

​ 第二点:服务器的压力小。基于上面一点,SPA 对服务器的压力小;

​ 第三点:前后端职责分离。架构清晰,前端进行交互逻辑,后端负责数据处理;

它的缺点也有三点:
第一点:初次加载耗时多。为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;

​ 第二点:前进后退路由管理问题。由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理(这是vue-router做的);

​ 第三点:SEO 难度较大。由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。
3、怎样理解 Vue 的单向数据流
首先
​ 单项数据流是发生在父组件朝子组件传值的时候,所有的 prop 使得其父子 prop 之间形成了一个单向下行绑定。
​ 也就是说:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态。
而且
​ 每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。所以,在一个子组件内部改变 prop,Vue 会在浏览器的控制台中发出警告。
4、computed 和 watch 的区别和运用的场景?
首先(相同点):
computed 和 watch都可以实现数据的监听。
其次(区别):
第一(本质):
computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,当依赖的属性值发生改变时,才会重新计算 computed 的值,它可以设置getter和setter.
watch: 更多的是观察的作用,每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter.
第二(运用场景):
computed:当我们需要进行数值计算,并且依赖于其它数据时,使用 computed。
watch:当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch。
5、直接用下标(索引)给一个数组项赋值,Vue 能检测到变化吗?
不能
因为,vue再做数据劫持时,只对数组做了劫持,没有对数组的每一项进行劫持。所以,用下标的方式修改数组项时,vue不能检测到数据的变化。
为了解决他们,Vue 也提供了操作方法: Vue.set
Vue.set(数组名,下标,新值)
6、谈谈你对 Vue 生命周期的理解?
1)、生命周期是什么?
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
2)、各个生命周期阶段及其钩子函数

vue的生命周期核心经历了四个阶段,在四个阶段的前后分别有两个钩子函数。

第一阶段:数据挂载阶段:把配置项data中的属性,赋给了vue对象本身,并做了数据劫持。

​ 该阶段前后的两个钩子函数:beforeCreate和created

第二阶段:模板渲染阶段:把vue对象的数据渲染到模板上。

​ 该阶段前后的两个钩子函数:beforeMount和mounted

第三阶段:组件更新阶段:当数据发送变化时,组件会进行重新渲染,所以,准确的说是,组件重新渲染阶段。

​ 该阶段前后的两个钩子函数:beforeUpdate和updated

第四阶段:组件销毁阶段:组件销毁。

​ 该阶段前后的两个钩子函数:beforeDestroy和destroyed

可以补充:
当使用keep-alive包裹组件时,会有组件激活和停用之说,这两个钩子函数分别是:activited和deactivated

还可以补充:

项目场景,如:发送请求,如:父组件修改子组件的props引起子组件的更新等等。
7、Vue 的父组件和子组件生命周期钩子函数执行顺序?
Vue 的父子组件钩子函数的执行顺序可以归类为4个 部分:

第一部分:首次加载渲染

​ 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

第二部分:父组件修改子组件的props值时:
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

第三部分:父组件修改的数据跟子组件没有关系时,

​ 不会影响子组件 父 beforeUpdate -> 父 updated

第四部分:销毁过程

​ 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
8、在哪个生命周期内调用异步请求?
答:大部分时候,会在created发送请求。
因为,
1)、此时data已经挂载到vue实例了,放在beforeCreate里太早,vue实例没有数据,放在mounted里太晚。
2)、放在 created 中有助于一致性,因为ssr不支持 beforeMount 、mounted 钩子函数。
Created的使用场景:如果组件的初始数据来自于后端,那就在created里发送请求
9、组件中 data 为什么是一个函数?
因为data是引用类型,如果不用函数,所有组件的data会指向同一块内存区域,导致数据之间互相影响。

而使用函数时,每次实例化组件时,调用函数,return一个新(new)的data对象。这样每个实例可以维护一份被返回对象的独立的拷贝,组件实例之间的 data 属性值不会互相影响。
10、v-model 的原理?
v-model 指令主要用在表单元素上实现数据双向绑定的。
例如:input、textarea、select 等创建双向数据绑定,本质上不过是语法糖,其实v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:

text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
11、Vue 实现数据绑定的原理
vue数据绑定是通过 数据劫持观察者模式 的方式来实现的。

​ 1、数据劫持:使用Object.defineProperty();

​ 目的是:感知属性的变化。当给属性赋值时,程序是能够感知的(知道的)。如果知道的话,就可以控制属性值的有效范围,也可以改变其它属性的值等。

当你把一个普通的 JavaScript 对象(json)传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

Object.defineProperty()函数:https://blog.csdn.net/jiang7701037/article/details/102785223

​ 2、观察者模式(发布订阅模式):
​ 目的:当属性发生变化时,使用该数据地方(模板,计算属性,watch等等)跟着变化
12、Vue 组件间通信有哪几种方式?
​ Vue 组件间通信主要指以下 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信,下面我们分别介绍每种通信方式:
(1)props / $emit : 父子组件通信

(2)ref: 适用 父子组件通信

(3)EventBus ($emit / $on): 适用于 父子、隔代、兄弟组件通信

(4)$root:集中管理,适用于所有场景

(5)Vuex 适用于所有场景
13、谈谈你对 keep-alive 的了解?
keep-alive 可以缓存其它组件及其的组件的状态,避免了组件的频繁创建和销毁。

它有个特性:

1)、用于缓存组件,一般结合路由和动态组件一起使用。

2)、提供 include 和 exclude 属性。两者都支持字符串或正则表达式, include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高;
3)、对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated。
14、Vue 中的 key 有什么作用?
首先

​ key 是Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速。

再说一下,diff算法的执行过程:

1)、oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex,
2)、在新节点和旧节点进行两两对比时,共有4种比较方式:
a.newStartIndex 和oldStartIndex 、
b.newEndIndex 和 oldEndIndex 、
c.newStartIndex 和 oldEndIndex 、
d.newEndIndex 和 oldStartIndex,
如果以上 4 种比较都没匹配,如果设置了key,就会用 key 再进行比较。
15、你对 Vue 项目进行哪些优化?
第一个方面:代码层面的优化
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key,且避免同时使用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
服务端渲染 SSR or 预渲染
第二个方面:Webpack 层面的优化
Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化
第三个方面:基础的 Web 技术的优化
开启 gzip 压缩
浏览器缓存
CDN 的使用
使用 Chrome Performance 查找性能瓶颈

热门文章

暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法,在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较,从而确定目标数是在中间数的左边还是右边,将查…
暂无图片
编程学习 ·

GMX 命令分类列表

建模和计算操作命令: 1.1 . 创建拓扑与坐标文件 gmx editconf - 编辑模拟盒子以及写入子组(subgroups) gmx protonate - 结构质子化 gmx x2top - 根据坐标生成原始拓扑文件 gmx solvate - 体系溶剂化 gmx insert-molecules - 将分子插入已有空位 gmx genconf - 增加…
暂无图片
编程学习 ·

一文高效回顾研究生课程《数值分析》重点

数值分析这门课的本质就是用离散的已知点去估计整体,就是由黑盒子产生的结果去估计这个黑盒子。在数学里这个黑盒子就是一个函数嘛,这门课会介绍许多方法去利用离散点最大化地逼近这个函数,甚至它的导数、积分,甚至微分方程的解。…
暂无图片
编程学习 ·

在职阿里5年,一个28岁女软测工程师的心声

简单的先说一下,坐标杭州,14届本科毕业,算上年前在阿里巴巴的面试,一共有面试了有6家公司(因为不想请假,因此只是每个晚上去其他公司面试,所以面试的公司比较少) ​ 编辑切换为居中…
暂无图片
编程学习 ·

字符串左旋c语言

目录 题目: 解题思路: 第一步: 第二步: 第三步: 总代码: 题目: 实现一个函数,可以左旋字符串中的k个字符。 例如: ABCD左旋一个字符得到BCDA ABCD左旋两个字符…
暂无图片
编程学习 ·

设计模式--观察者模式笔记

模式的定义与特点 观察者(Observer)模式的定义:指多个对象间存在一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式&#xf…
暂无图片
编程学习 ·

睡觉突然身体动不了,什么是睡眠痽痪症

很多朋友可能有这样的体验,睡觉过程中突然意识清醒,身体却动弹不了。这时候感觉非常恐怖,希望旁边有一个人推自己一下。阳光以前也经常会碰到这样的情况,一年有一百多次,那时候很害怕晚上到来,睡觉了就会出…
暂无图片
编程学习 ·

深入理解C++智能指针——浅析MSVC源码

文章目录unique_ptrshared_ptr 与 weak_ptrstd::bad_weak_ptr 异常std::enable_shared_from_thisunique_ptr unique_ptr 是一个只移型别(move-only type,只移型别还有std::mutex等)。 结合一下工厂模式,看看其基本用法&#xff…
暂无图片
编程学习 ·

@TableField(exist = false)

TableField(exist false) //申明此字段不在数据库存在,但代码中需要用到它,通知Mybatis-plus在做写库操作是忽略它。,.
暂无图片
编程学习 ·

Java Web day15

第十二章文件上传和下载 一、如何实现文件上传 要实现Web开发中的文件上传功能,通常需要完成两步操作:一.是在Web页面中添加上传输入项;二是在Servlet中读取上传文件的数据,并保存到本地硬盘中。 需要使用一个Apache组织提供一个…
暂无图片
编程学习 ·

【51nod 2478】【单调栈】【前缀和】小b接水

小b接水题目解题思路Code51nod 2478 小b接水 题目 输入样例 12 0 1 0 2 1 0 1 3 2 1 2 1输出样例 6解题思路 可以发现最后能拦住水的都是向两边递减高度(?) 不管两个高积木之间的的积木是怎样乱七八糟的高度,最后能用来装水的…
暂无图片
编程学习 ·

花了大半天写了一个UVC扩展单元调试工具

基于DIRECTSHOW 实现的,用的是MFC VS2019. 详见:http://www.usbzh.com/article/detail-761.html 获取方法 加QQ群:952873936,然后在群文件\USB调试工具&测试软件\UVCXU-V1.0(UVC扩展单元调试工具-USB中文网官方版).exe USB中文网 USB中文…
暂无图片
编程学习 ·

贪心(一):区间问题、Huffman树

区间问题 例题一:区间选点 给定 N 个闭区间 [ai,bi]请你在数轴上选择尽量少的点,使得每个区间内至少包含一个选出的点。 输出选择的点的最小数量。 位于区间端点上的点也算作区间内。 输入格式 第一行包含整数 N,表示区间数。 接下来 …
暂无图片
编程学习 ·

C语言练习实例——费氏数列

目录 题目 解法 输出结果 题目 Fibonacci为1200年代的欧洲数学家,在他的着作中曾经提到:「若有一只免子每个月生一只小免子,一个月后小免子也开始生产。起初只有一只免子,一个月后就有两只免子,二个月后有三只免子…
暂无图片
编程学习 ·

Android开发(2): Android 资源

个人笔记整理 Android 资源 Android中的资源,一般分为两类: 系统内置资源:Android SDK中所提供的已经定义好的资源,用户可以直接拿来使用。 用户自定义资源:用户自己定义或引入的,只适用于当前应用的资源…
暂无图片
编程学习 ·

零基础如何在短时间内拿到算法offer

​算法工程师是利用算法处理事物的职业 算法(Algorithm)是一系列解决问题的清晰指令,也就是说,能够对一定规范的输入,在有限时间内获得所要求的输出。 如果一个算法有缺陷,或不适合于某个问题,执…
暂无图片
编程学习 ·

人工智能:知识图谱实战总结

人工智能python,NLP,知识图谱,机器学习,深度学习人工智能:知识图谱实战前言一、实体建模工具Protegepython,NLP,知识图谱,机器学习,深度学习 人工智能:知识图…
暂无图片
编程学习 ·

【无标题】

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…