Vue基础面试题汇总

Vue基础面试题汇总

前端三大框架：Vue、React、Angular

Vue的特点：

① 使用简洁,只需HTML模板加上JSON数据，再创建一个Vue实例即可。

② 自动追踪依赖的模板表达式和计算属性。

③ 24kb轻量级的运行时库。

④ 精确有效的异步批量DOM更新。

⑤ 解耦可复用的组件来构建界面。

面试题：

1、三大框架的区别：

Vue：轻量级、单页面、不支持IE8、数据驱动和组件化开发（双向数据）、分层渐进式开发框架、适用于小型项目

React：速度快、跨浏览器兼容、单向数据流、兼容性好、数据驱动和组件化开发，灵活性很高，需要什么都得自己构建逻辑自己写，但是并不是一个完整的框架，需要加上ReactRouter和Flux才能完成，适用于中型项目比如app

Angular：模块化功能强大、自定义directive非常灵活、双向数据绑定，依赖注入，但是比较笨重，不兼容IE6/7，适用于企业级开发、大型的系统使用

2、Vue的渐进式框架？

何为渐进式------可以使用你想用的部分功能，那些不想使用的功能可以不去使用，并不要求一次性接收并且使用它的全部功能

Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计，分为五层：声明式渲染、组件系统、客户端路由、大规模状态管理、构件工具

3、Vue的核心是什么？

（1）数据驱动和组件化开发

（2）渐进式框架

4、Vue.js和jQuery的区别？（框架和库的区别）

jQuery的特点：

（1）获取DOM很方便，支持多种类型选择器

（2）有丰富的DOM增删改查API

（3）处理了DOM兼容性问题

（3）提供了处理样式的多种API，简化部分动画操作，支持基于定位机制使用animate来自定义动画效果

（4）是一个为事件处理特点设计的框架，提供了静态绑定事件和动态绑定事件，完善了事件的处理机制

（6）封装了ajax异步请求数据的方法

（7）适合MVC开发模式

（8）jQuery提供某一些功能，对项目的入侵性较小，如果它无法完成某些需求，可以很容易的切换到其他库来实现，小而精巧，任意切换

Vue的特点：

（1）数据化驱动和组件化开发

（2）适合MVVM开发模式

（3）Vue是一套完整的解决方案，对项目的入侵性较大，项目如果需要更换框架，则需要重新架构整个项目，大而全面，有自己的语法，不能轻易切换

5、MVC模型和MVVM模型区别：

MVC：

（1）model–模型层

（2）view–视图层

（3）controller–控制层

（4）缺点：频繁的DOM操作，浏览器跨引擎操作（形成重绘/重排，使用了渲染引擎），导致界面渲染效率低；不适合小中型的应用程序；系统结构较为复杂，实现较为复杂；视图层调用模型层数据效率低（要通过控制层）

（5）优点：低耦合（业务层和视图层分离）；重用性高；生命周期成本低（开发和维护用户接口的技术含量低）；部署快、可维护性高

MVVM：

（1）model：模型层

（2）view：视图层

（3）viewModel：视图模型层

（4）优点：轻量级的框架，通过简洁的API提供高效的数据绑定与灵活的组件系统；操作、学习简单；双向数据绑定与组件化；耦合低，数据、视图、结构分离；操作虚拟DOM，减少重排和重绘，页面渲染效率高，运行速度快，将程序员从繁复的DOM操作中解放出来；

6、重绘和重排

（1）重排：由DOM变化引起元素几何属性变化，导致浏览器不得不重新计算元素的几何属性，并且重新构件渲染树，这个过程为重排

（2）重绘：完成了重排后，要将重新构建的渲染树渲染到页面，这个过程为重绘

（3）重排必然带来重绘，重绘不一定会带来重排

（4）何时触发重排：–添加或者删除Dom节点----元素几何属性发生变化----内容改变----页面渲染器初始化----浏览器窗口大小发生变化

（5）减少重绘和重排：

------最小化重绘和重排：cssText、直接修改类名

------批量操作DOM：脱离文档流–操作–重回文档流

（脱离文档流的方法：（1）display:none; opacity:0; visibility:hidden （2）使用文档片段创建子树createDocumentFragment，再将片段拷贝到原文档中去，因为拷贝时仅仅是将其中的节点集合拷贝进去，并不会将文档片段拷贝进去 （3）将原来的元素拷贝到独立的节点中，操作完毕后再去覆盖原来的元素）

------缓存布局信息，一次获取后就将获取的信息保存在变量中，后面通过变量去计算即可

7、数据驱动的原理：

数据劫持：vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取属性值时，就会触发getter()方法，在view中如果数据发生了变化，就会通过Object.defineProperty()对属性设置一个setter函数，当数据改变了就会触发这个函数来调用更新函数来更新视图

发布者：用来挟持并监听所有属性，如果发生变动就通知订阅者

订阅者：收到属性变化通知并执行相应的更新函数，更新视图

原理：Vue.js设置了一个观察者来实现数据驱动，，在实例化Vue过程中，会遍历data对象的每一个属性，并且使用Object.defineProperty为他们分别设置setter()和getter()函数，同时每一个实例对象都有一个watcher对象（订阅者），在模板编译火锅城中，使用getter去访问data的属性值，这时watcher会将用到的data属性标记为依赖，使用这个依赖将数据和视图练习起来，当渲染的视图依赖发生变化（setter）调用时，watcher就会比对前后两个数值是否发生变化，变化了就执行更新函数来更新视图

如有不对，我们可以探讨一下哦