title: vue 基础面试题 3 autoGroup-1: vue 基础面试题
# vue 基础面试题
- vue 基础面试题
- 第 1 题-Vue 中key的作用和工作原理,说说你对它的理解
- 第 2 题-Vue 中的 diff 原理
- 第 3 题-v-if 与 v-for 的优先级
- 第 4 题-v-if 与 v-show 的区别
- 第 5 题-computed 和 watch 的区别和运用的场景？
- 第 6 题-如何理解自定义指令?
- 第 7 题-v-model的原理是什么?
- 第 8 题-Vue 的优点
- 第 9 题-请谈一谈 Vue 中的 MVVM 模式
- 第 10 题-渐进式框架的理解
- 第 11 题-Vue 中双向数据绑定是如何实现的
- 第 12 题-单页面应用和多页面应用区别以及优缺点
- 第 13 题-Vue 和 jQuery 的区别
- 第 14 题-axios 的特点有哪些
- 第 15 题-请谈一谈 Vue 框架和 Angularjs 和 React 的不同
# 第 1 题-Vue 中key的作用和工作原理,说说你对它的理解
key的作用主要是为了高效的更新虚拟 DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同的元素,使得整个patch过程更加高效,减少DOM操作量,提高性能
- 若不设置
key还可能在列表更新时引发一些隐蔽的bug vue中在使用相同标签名元素的过度切换时,也会使用到key属性,其目的是为了让vue可以区分它们,否则vue只会替换其内部属性而不回触发过度效果
# 第 2 题-Vue 中的 diff 原理
vue的diff算法是平级比较,不考虑跨级比较的情况,内部采用深度递归的方式+双指针的方式进行比较
先比较是否相同的节点
相同节点比较属性,并复用老节点
比较儿子节点,考虑旧节点和新节点儿子的情况
比对查找进行复用
vue2的核心Diff算法采用了双端比较的算法,同时从新旧children的两端开始进行比较,借助key值找到可复用的节点,在进行相关的操作
vue3.x借鉴了ivi算法和inferno算法,该算法中还运用了动态规划的思想求解最长递归子序列
# 第 3 题-v-if 与 v-for 的优先级
v-for优先于v-if被解析- 如果同时出现,每次渲染都会先执行循环在判断条件,无论如何循环都不可避免,浪费了性能
- 要避免出现这种情况则在
外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环 - 如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项
# 第 4 题-v-if 与 v-show 的区别
v-if是真正的条件渲染,直到条件第一次变为真时，才会开始渲染v-show不管初始条件是什么会渲染,并且只是简单基于css的display属性进行切换
注意: v-if适用于不需要频繁切换条件的场景,v-show则适用于需要非常频繁切换条件的场景
# 第 5 题-computed 和 watch 的区别和运用的场景？
computed:计算属性,依赖其他属性值,并且computed的值有缓存,只有它依赖的属性值发生改变,下一次获取computed的值才会重新计算computed的值
watch:监听数据的变化,更多的是观察的作用,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作
运用场景:
- 当我们需要进行数值计算,并且依赖于其他数据时,应该使用
watch,使用watch选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并且我们得到最终的结果前,设置中间状态,这些都是计算属性无法做到的 - 当我们需要进行数值计算,并且依赖于其他数据时,应该使用
computed,因为可以利用computed的缓存特性,避免每次获取值时,都要重新计算
# 第 6 题-如何理解自定义指令?
指令的实现原理,可以从编译原理->代码生成->指令钩子实现进行概述
- 在生成
ast语法树时,遇到指令会给当前元素添加directives属性 - 通过
genDirectives生成指令代码 - 在
patch前将指令的钩子提取到cbs中,在patch过程中调用对应的钩子 - 当执行指令对应的钩子函数时,调用对应指令定义的方法
# 第 7 题-v-model的原理是什么?
v-model本质就是一个语法糖,可以看成是value+input方法的语法糖,可以通过model属性的prop和event属性来进行自定义,原生的v-model,会更具标签的不同生成不同的事件和属性,v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件
text和textarea元素使用value属性和input事件checkbox和radio使用checked属性和change事件select字段将value作为prop并将change作为事件
# 第 8 题-Vue 的优点
# 第 9 题-请谈一谈 Vue 中的 MVVM 模式
m(数据)v(视图)c(控制器)-->mvvm
数据是核心,分离
MVVM 模式的指令 v-bind,将传统的 c 控制层变成vm
1: 模板解析(通过模板来动态显示数据,实现初始化显示,解析大括号表达式),解析指令
2: 数据绑定(通过数据的更新,更新数据),通过数据劫持实现
# 第 10 题-渐进式框架的理解
# 第 11 题-Vue 中双向数据绑定是如何实现的
视图层--数据层
vue2.0 defineProperty
vue3.0 proxy
