VUE经典面试题

前端进阶中

已于 2023-07-12 11:47:43 修改

阅读量193

点赞数

分类专栏：面试宝典文章标签： vue.js 前端 javascript

于 2022-11-07 22:49:26 首次发布

本文链接：https://blog.csdn.net/shi15926lei/article/details/127741325

版权

面试宝典专栏收录该内容

11 篇文章 0 订阅

订阅专栏

vue2.0的实现原理?
vue数据双向绑定是通过数据劫持结合发布者订阅模式来实现的,也就是说数据层和视图层同步,数据层发生变化,视图跟着变化,视图变化数据也跟着随之发生变化.
第一步:需要observe的数据对象进行递归遍历
第二步:compile解析模板指令
第三步:Watcher订阅者是Observe和Compile之间通信的桥梁
第四步:MVVM作为数据绑定的入口,整合Observe和Compile和Watcher三者,通过Observe来监听自己的model的数据变化,通过compile来解析编译模板指令,最终利用Watcher搭起Observe和Compile之间的通信桥梁,达到数据变化--->视图更新;视图交互变化--->数据model变化的双向绑定效果.
computed和watch和methods三者之间的区别?运用场景?
computed和watch都基于watcher来实现的。
computed的属性是具备缓存的，依赖的值不发生变化，对其取值时计算属性方法不会重复执行.
watch是监听值的变化，当值发生改变的时候，会调用回调函数.
methods 方法表示一个具体的操作，主要用来书写业务逻辑.
computed 和 methods 区别?
- computed 是属性调用，而 methods 是方法调用
- computed 带有缓存功能，而 methods 不会被缓存
- computed 中的方法不能带参数，而 methods 中的方法可以带参数
computed在做用户设置模块,设置用户密码的时候,需要给密码加号,具体密码的长度是不知道的,此时用computed来监听密码的长度,然后判断添加几个号.
watch在做数据监测模块的时候,上面是一个下拉框,页面需求是通过点击下拉框,然后再显示下面的table的数据,此时需要监听下拉框里面ass_id值的变化,有值就显示下面的内容,如果没有就不显示,也可以有change做,也可以用computed监听.
v-for，key属性的作用?
Vue中为v-for提供了一个属性，key，在写v-for的时候，都需要给元素加上一个key属性，这个key属性必须是唯一的标识，并且给key赋值的内容不能是可变的。
key属性的作用:
1.提高v-for渲染的效率和渲染性能 2.避免数据混乱
为什么v-if和v-for不能同时使用?
1.v-if避免和v-for一起使用,原因是v-for的优先级比v-if高，一起使用会造成性能浪费
解决方案有两种，把v-if放在v-for的外层或者把需要v-for的属性先从计算属性中过滤一次
2.v-if和v-for的优先级问题在vue3中不需要考虑，vue3更新了v-if和v-for的优先级，使v-if的优先级高于v-for
谈谈对vue中diff算法的理解?
1. diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作为对比(即diff),将变化的地方更新在真实DOM上，用来修改dom,不会引起dom树的重绘;
2. vue.2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方;
3. vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称为patch;
4.diff过程整体遵循深度优先，同层比较的策略，两个节点之间比较会根据他们是否拥有子节点或者文本节点做不同操作，比较两组子节点是算法的重点，首先，假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点，借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。
vue首屏白屏如何解决?
总结:资源加载优化和页面渲染优化
1.路由懒加载/图片懒加载
2.开启gzip压缩
3.进行cdn加速
4.开启vue服务渲染模式(使用SSR)
5.用webpack的externals属性把不需要打包的库文件分离出去,减少打包后文件的大小
6.在生产环境中删除不必要的console.log
7.静态资源本地缓存
8.添加loading效果,给用户一种进度感受
9.UI框架按需导入
10.图片资源进行压缩(雪碧图)
11.组件重复打包(在webpack的config文件中，修改CommonsChunkPlugin的配置)
12.提取公共样式
13.减少es6转为es5的冗余代码
Vue 的最大的优势是什么？
一、vue作为一款轻量级框架，门槛低，上手快，简单易学。
二、vue可以进行组件化开发，数据与结构相分离，使代码量减少，从而提升开发效率，易于理解
三、vue最突出的优势在于对数据进行双向绑定，使用虚拟DOM
四、相较于传统页面通过超链接实现页面跳转，vue会使用路由跳转不会刷新页面
五、vue是单页面应用，页面局部刷新，不用每次跳转都请求数据，加快了访问速度，提升了用户体验
对于MVVM的理解?
MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View桥梁。
对于MVC的理解?
MVC是一种设计模式：
M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据；
V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的；
C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。
MVVM的优势
1.mvc和mvvm都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量DOM操作使页面渲染性能降低，加载速度变慢的问题。
2.MVVM与MVC最大的区别就是：它实现了View和Model的自动同步：当Model的属性改变时，我们不用再自己手动操作Dom元素来改变View的显示，它会自动变化。
3.整体看来，MVVM比MVC精简很多，我们不用再用选择器频繁地操作DOM。
MVVM并不是用VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。
Vue的路由实现：hash模式和 history模式?
vue-router中有三种模式:分别是hash、history、abstract
hash模式：使用了锚点技术重写了url访问路径,会在原有的url路径上拼接成“#”，这种方式可以不重新加载原有html基础上实现切换url路径的目的.
#以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history模式：history是vue-router中常用的一中路由模式,它不需要借助描点技术,是采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。
什么是vuex?
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成：
分别是：state,mutations,actions,getters,modules
state: 专门存放数据的,自己定义变量(this.$store.state.userInfo.man_id)
mutations: 唯一可以修改state数据的地方 (this.$store.commit('increment'))
actions:可以包含异步操作,请求异步必须在action里面(写方法的)this.$store.dispatch('increment')
getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）默认会传递2个参数(state, getters) this.$store.getters.doneTodosCount
modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter
问题：存储在vuex中的状态，刷新页面，会丢失。
最简单的做法就是利用插件 vuex-persistedState。为了解决刷新页面数据丢失，才有了数据持久化。
也可以把值存到本地储存中,从本地存储中进行取值
虚拟DOM的实现原理与优缺点?
用JavaScript对象模拟真实DOM树,对真实DOM进行抽象;
通过diff算法,比较两棵DOM树的差异;
通过pach,最后把两个虚拟DOM对象的差异更新到真正的dom中.
虚拟DOM的作用：使用原生js或者jquery写页面的时候会发现操作DOM是一件非常麻烦的一件事情，往往是DOM标签
和js逻辑同时写在js文件里，数据交互时不时还要写很多的input隐藏域，如果没有好的代码规范的话会显得代码非常冗余混乱，耦合性高并且难以维护。
另外一方面在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的，常常会出现页面卡死的情况；所以尽量减少对DOM的操作成为了优化前端性能的必要手段，vdom就是将DOM的对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率。
优点：
保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行pach,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限
无需手动操作DOM: 虚拟DOM的diff和pach都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率
跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等
缺点：
无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化，比如VScode采用直接手动操作DOM的方式进行极端的性能优化