前端面试题（框架部分）

清疚 2022-03-18 11:26 126阅读 0赞

**Vue：**  
**一、MVVM模式与MVC模式的区别**  
MVVM即Model-View-ViewModel。  
它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。  
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。 ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。 DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。   
MVC即Model-View-Controller  
MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

**二、v-show与v-if的区别**   
条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值

**三、如何让css只在当前组件中起作用**

在每一个vue组件中都可以定义各自的css，js，如果希望组件内写的css只对当前组件起作用，只需要在style中写入scoped，即：   
<style scoped></style>

**四、指令keep-alive**   
在vue-router写着keep-alive，keep-alive的含义： 如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令   
<component :is='curremtView' keep-alive></component>**五、Vue.js与其他框架的区别？**  
**1.与AngularJS的区别**  
相同点：  
都支持指令：内置指令和自定义指令。  
都支持过滤器：内置过滤器和自定义过滤器。  
都支持双向数据绑定。  
都不支持低端浏览器。  
不同点：  
（1）.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。  
（2）.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。  
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。  
（3）.vue中数据放在data对象里面，angular数据绑定在$scope上面  
（4）.vue有组件化概念，angular中没有**2.与React的区别**  
相同点：  
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。  
中心思想相同：一切都是组件，组件实例之间可以嵌套。  
都提供合理的钩子函数，可以让开发者定制化地去处理需求。  
都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。  
在组件开发中都支持mixins的特性。  
不同点：  
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。  
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

**六、Vue的双向数据绑定原理是什么？**  
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

**七、vue如何实现父子组件通信，以及非父子组件通信？**  
**1、父子:**  
使用props：  
props监听父组件传递过来的信息  
传递过来后，可直接引用，就如已经传递过来数据塞到data  
使用$refs:  
this.$refs.XXX  
**2、子父:**  
自定义事件:  
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件  
子组件$emit()触发，父组件$on()监听  
使用$parent：  
this.$parent.XXX  
**3、非父子:**  
简单场景用bus，复杂场景用vuex