Vue面试题 70道题目及答案(重排)

分类: 365bet如何提款 时间: 2025-08-16 20:56:21 作者: admin 阅读: 3251
Vue面试题 70道题目及答案(重排)

打包命令是什么?

打包后会生成哪些文件?

如何配置打包后生成的文件路径错误问题

简述MVVM、MVP、MVC模式及区别

MVVM

MVVM 是 Model-View-ViewModel 的缩写。

Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。

View 代表UI 组件,它负责将数据模型转化成UI 展现出来。

ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。

在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

MVVM模式的理解

MVVM 由 Model、View、ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

Vue中的双向数据绑定是如何实现的

Vue双向数据绑定实现原理

分成两个进程,一个进程是对挂载目标元素模板里的v-model和{{ }}这两个指令进行编译(绿色)。另一个进程是对传进去的data对象里面的数据进行监听(红色)。

红色:

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部加上set和get访问器,这样在设置data的属性值的时候,会触发set方法,那么set方法主要有两个作用,一是改变data里面的属性值,二是发出数据变化的通知。Observer作为数据的观察者,让数据对象的读写操作都处于自己的监管之下,Dep作为Watcher(订阅器)的收集者,当数据发生变化set会发出通知,会被Observer观察到,然后由Dep通知到Watcher,最后更新视图。

绿色:

指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,同样由Dep进行收集,然后由Dep通知到Watcher,最后更新视图。

节点介绍

数据监听器观察者Observer,能够对数据对象的所有属性进行监听,让数据对象的读写操作都处于自己的监管之下,当数据发生变化set会发出通知,会被Observer观察到,然后由Dep通知到Watcher,最后更新视图。

实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性

Watcher将数据监听器和指令解析器连接起来,数据的属性变动时,执行指令绑定的相应回调函数,

1.如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。

指令解析器Compile,

对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher

Dep:因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的

Object.defineProperty()方法做什么用

vue-cli中常用的配置

简述vue内部运作机制

vuex内部运作机制

axios内部运作机制

vue-router内部运作机制

在vue-cli中怎么使用scss

vue和jquery有什么区别?

vue的双向数据绑定原理是什么

你是怎么理解组件化开发的

简述vue-cli每个目录的作用

为什么选择vue?和其它框架对比的优劣势在哪?

route和router的区别

vue两个核心点是什么?

数据驱动、组件系统

用Vuex和不用vuex有什么区别?

第一次页面加载会触发哪几个钩子

v-model是什么?

vue中的数组和原生js中的数组有什么区别?

简述$set及使用场景

ajax应该放在组件中还是视图中或是vuex中

你觉得什么样的项目比较适合用vue框架

列举vue中触发视图更新的方法

Vue不能检测数组或对象变动问题的解决方法有哪些

vue-router,history模式下打包后访问空白

打包后访问某个视图,刷新404问题

详述虚拟DOM

第一种:

1、state数据

2、JSX模板

3、 数据 + 模板 结合,生成真实的DOM -> 视图

4、state发生了变化

5、数据 + 模板 结合,生成真实的DOM,替换原始的DOM

缺陷:

1、第一次生成了完整的DOM片段

2、第二次生成了完整的DOM片段

3、第二次的DOM替换第一次的DOM,非常耗费性能

第二种:

1、state数据

2、JSX模板

3、数据 + 模板 结合, 生成真实的DOM -> 视图

4、state发生变化

5、数据 + 模板 结合,生成真实的DOM,并不直接替换原始的DOM

6、新的DOM(DocumentFragment)和原始的DOM做比对,找差异

7、找出input框发生了变化

8、只用新的DOM中的input元素,替换掉老的DOM中input元素

缺陷:

虽然DOM只是局部替换,但是在比对时候的计算是比较耗费性能的,因此,性能的提升并不明显

第三种:

1、state数据

2、JSX模板

3、数据 + 模板 生成虚拟DOM(虚拟DOM就是一个JS对象,用它来描述真实DOM)(损耗一点性能)

虚拟DOM:['div’, {id: 'abc’}, ['span’, '’, ‘hello world’]]

4、用虚拟DOM的结构生成真实的DOM -> 视图显示

真实DOM:

5、state发生了变化

6、数据 + 模板 生成新的虚拟DOM:['div’, {id: 'abc’}, ['span’, '’, ‘hi world’]](极大提升性能)

7、比较原始虚拟DOM和新的虚拟DOM的区别,找到的区别是span中的内容发生了变化(极大提升了性能)

8、直接操作DOM,改变span中的内容

总结:

减少了真实DOM的创建及对比,创建都是JS对象,对比的也都是JS的对象,在JS底层实现了极大的性能飞越

组件生成流程:

JSX -> JS对象(虚拟DOM) -> 真实的DOM

用React.createElement改写JSX模板:

JSX:return

{ item }

JSX -> JS对象(虚拟DOM) -> 真实的DOM

React.createElement('div’, {}, React.createElement('span’, {}, ‘item’))

JSX -> createElement -> JS对象(虚拟DOM) -> 真实的DOM

虚拟DOM优点:

1、性能提升了

2、它使得跨端应用得以实现,Ract Native

React可以写原生应用了,得益于React中的虚拟DOM,如果没有虚拟DOM是不能写原生应用的。原生系统是不支持DOM不存在DOm这个概念的,但是支持虚拟DOM(虚拟DOM就是一个JS对象);虚拟DOM可以在浏览器端被解析为真实的DOM,在原生端可以被解析原生所支持的组件等格式

详述虚拟DOM中的diff算法

虚拟DOM对比时,会用到diff算法

虚拟DOM什么时候会被比对?

当数据发生变化的时候就会被比对

那什么时候数据会发生改变呢?

要么改变了state,要么改变了props(props的改变其实是他的父组件的state发生了改变)

setState方法,其实是异步的,为什么是异步的?实际为了提升React底层的性能,假设:调用三次setState变更三组数据,大家想页面会怎么做或者说React会怎么做?我们想的是React可能会做三次比对更新三次视图。又假设三次更新间隔非常小,这样会耗费性能,React可以把三次合并为一次,只去做一次虚拟DOM的比对,然后更新一次视图,这样的话就可以省去两次比对性能上的耗费。

同层比对,如果一致,那么继续比对第二层,如果比对一样了,继续往下比对。

如果比对到不一样了,React会这么做,它不会再继续往下比对了,而是从不一样的这一层开始直接用新的覆盖掉就得DOM节点,这样的话岂不是性能并未得到最大提升?这样的话会造成重复节点的浪费,。那这样比对会有什么好处呢?同层比对带来的好处就是比对的算法特别简单,虽然可能会造成DOM上的重新渲染的浪费,但是大大的减少了虚拟DOM之间比对的算法上的性能消耗,所以React中采用了同层比对的算法。

遍历时候key的问题:

假如:数组中有五条数据,渲染到页面,然后生成五个虚拟DOM树,接下来我往里面增加了一条数据于是数据发生变化会生成一个新的虚拟DOM树,然后我们会做两个虚拟DOM的比对也就是上下进行比对匹配关系,如果每一个虚拟DOM的节点没有一个key值,它就没有一个自己的名字,当我们在做两个虚拟DOM树的比对的时候节点和节点之间的关系就很难被确立,我们得做两层循环的比较,这样的话比较起来就很麻烦了,当然也是很耗费性能的。

我们可以这样优化,假如我们在做DOM节点的循环的时候,我们可以给每个节点起个名字,A、B、C、D、E在第二次循环的时候我们有六个,以前的ABCDE还存在还是叫做ABCDE,我又增加了一个节点Z进来这个时候比对就很简单了,我们根据他们的名字进行比对,马上就能知道ABCDE都一致,可以继续复用,只有Z不同,我们快速的建立关联后把Z增加到这个DOM树上就可以了。所以极大的提升了虚拟DOM比对的性能。

如果提升性能有个前提我们尽量不要用下标,因为大家看按照下标的话右图ABCDE,下面新的DOM树ABCDE和上面的其实不再是对应的关系了,对导致key值不稳定,key值是变化的,失去了存在的意义了。那用什么比较合适呢?唯一不变化的、稳定的值。

ajax、axios、fetch之间的详细区别以及优缺点

相关文章

5、洛克王国经验怎么用
共享汽车来了!目前试水广州大学城 40%的用户为学生
泽诺尼亚4职业怎么选