Vue经典面试题合集

Vue经典面试题合集

1. 单页应用(SPA)
   SPA,全称是 single-page application，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用的使用已经很广泛，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权，也让前端代码更复杂和庞大，模块化、组件化以及架构设计都变得越来越重要
   工作原理:
   SPA 的一个重要实现就是改变路由时，页面不刷新。实现这个功能，通常有两种方式：使用 window.history 对象或 location.hash。

2. MVVM原理
   是指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式框架。它包括：修改View层，Model对应数据发生变化。View 是与用户进行交互的桥梁。ViewModel 充当数据转换器，将Model 信息转换为 View 的信息，将命令从 View 传递到 Model。Model数据变化，不需要查找DOM，直接更新View。

3. Vue的响应式原理(双向数据绑定)
   Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响，Vue中编写了一个watcher来处理数据在使用getter方法时，总会通知watcher实例对view层渲染页面同样的，在使用setter方法时，总会在变更值的同时，通知watcher实例对view层进行更新
   

4. data为什么是函数
   　　如果两个实例引用同一个对象，当其中一个实例的属性发生改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会相互干扰。这是因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
   组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

5. v-model的原理
   v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

6. v-if和v-show的区别
   v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐，v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留
   性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗
   使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换
   相同点 v-show 都可以动态控制着dom元素的显示隐藏
   不同点：v-if 的显示隐藏是将DOM元素整个添加或删除，v-show 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的，在渲染多个元素的时候，可以把一个元素作为包装元素，并使用v-if 进行条件判断，最终的渲染不会包含这个元素，v-show是不支持语法

7. Vue的生命周期
   

8. 父子组件生命周期顺序
   父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。