前端面试题整理—Vue篇

Posted 2021-11-25 theblogs

 1、对vue的理解，他有什么特点，vue为什么不能兼容IE8及以下浏览器

　　vue是一套用于构建用户界面的渐进式框架，核心是一个响应的数据绑定系统

　　vue是一款MVVM框架，基于双向绑定数据，当数据发生变化时候，vue自身会进行一些运算

　　特点：简洁轻量、数据驱动、组件化、模块友好

　　vue.js使用了IE8无法模拟的 ECMAScript 5 特性，没有替代方案

 

2、简述Vue双向数据绑定的原理

　　主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的

　　vue是通过数据劫持的方式来做数据绑定，最核心的方法就是通过Object.defineProperty()来实现对属性的劫持

　　在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数，达到监听数据变动的目的

 

3、什么是MVVM，和MVC的区别

　　MVVM是Model-View-ViewModel的缩写

　　Model层代表数据模型

　　View代表组件视图，负责将数据模型转化成UI展现出来

　　ViewModel是一个同步 View 和 Model 的对象（双向绑定）

　　在MVVM中，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，

　　Model和ViewModel之间的交互是双向的，因此 通过视图操作数据，也能通过数据操作视图

　　MVC是Model-View- Controller的简写。即模型-视图-控制器，使用MVC的目的是为了将M和V相分离

　　MVVM与MVC最大的区别就是实现了View和Model的自动同步，也就是当Model的属性改变时

　　我们不用再手动操作Dom来改变View，而是改变后该属性对应View层会自动改变

 

4、vue.js的两个核心是什么

　　数据驱动和组件化思想

 

5、vue与angular的区别

　　vue的双向邦定是基于ES5中getter/setter来实现的，而angular是由自己实现一套模版编译规则，需要进行所谓的“脏值”检查，vue则不需要

　　vue需要提供一个el对象进行实例化，后续的所有作用范围也是在el对象之下，而angular而是整个html页面

 

6、说下vue的底层原理

　　Vue的模式是m-v-vm模式，即（model-view-modelView），通过modelView作为中间层，进行双向数据的绑定与变化

　　1）通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树

　　2）一旦被监测的数据改变，会通过Object.defineProperty定义的数据拦截，截取到数据的变化

　　3）截取到的数据变化，从而通过订阅——发布者模式，触发Watcher（观察者）,从而改变虚拟dom的中的具体数据

　　4）最后通过更新虚拟dom的元素值，从而改变最后渲染dom树的值，完成双向绑定

 

7、如何使css只在当前组件起作用

　　如果想写的css只对当前组件起作用，则在style中写入scoped

 

8、vue中v-if和v-show的区别

　　v-if和v-show都是用来控制元素的渲染

　　v-if是根据后面数据的真假，来判断DOM的添加删除等操作

　　v-show只是在修改元素的css样式（display属性值）

　　v-if如果初始渲染条件为真，就渲染，反之就不渲染

　　v-show不管初始条件是否为真，都会被渲染

　　v-if有更高的切换消耗，不适合做频繁的切换

　　 v-show有更高的初始渲染消耗，适合做频繁的切换

 

9、请举例vue常用的修饰符

　　事件修饰符：stop、prevent、self、once　　

　　lazy、number、trim、exact

 

10、v-on可以绑定多个方法吗？

　　可以

<input v-on:keyup.enter="submit" v-on:focus="onFocus">