2019前端面试题（深圳）

来深圳面试了10多家公司，总结一些面试题。

MVC,MVVC,MVVM模式的理解

1.MVC(Model-View-Controller)
Model(模型):数据层，负责存储数据。
View(视图):展现层，用户所看到的页面
Controller(控制器):协调层，负责协调Model和View，根据用户在View上的动作在Model上作出对应的更改，同时将更改的信息返回到View上。
三者之间的关系
Controller可以直接访问Model，也可以直接控制View,但是Model和View不能相互通信，相当于COntroller就是介于这两者之间的协调者。

2,MVVM(Model-View-ViewModel)

Model(模型):数据层，负责存储数据。
View(控制器):就是ViewController层，他的任务就是从ViewModel层获取数据，然后显示。
ViewModel(视图模型):就是View和Model层的粘合剂，封装业务逻辑处理，封装网络处理，封装数据缓存。就是把原来ViewController层的业务逻辑和页面逻辑等剥离出来放到ViewModel层。

3,MVVC(Model-View-View-Controller)
Model(模型):数据层，负责存储数据。
View(视图):展现层，创建需求创建cell
View(视图):定义数组，用来接收控制中的数据。处理回调（比如:刷新回调、点击cell回调、加载更多回调、动态视图高度回调等等）

Controller(控制器):加载网络数据懒加载

4. Vue 有哪些指令？

v-html、v-show、v-if、v-for等等

5. v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

6. 简述Vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

7. 简述Vue的生命周期

它可以总共分为8个阶段：

beforeCreate（创建前）,

created（创建后）,

beforeMount(载入前),

mounted（载入后）,

beforeUpdate（更新前）,

updated（更新后）,

beforeDestroy（销毁前）,

destroyed（销毁后）

8.vue中Computed 和 Watch的使用和区别

1、计算属性computed适用的情形

我们可能会有这样的需求，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性。

例如在下面这个例子中，如果我们使用监听函数，代码就会变得有点冗余。

2、监听器watch适当的情形

watch函数适用于，当数据发生变化时，执行异步操作或较大开销操作的情况。

8.vue 与 react优缺点对比

vue 
API设计上简单，语法简单，学习成本低 
构建方面不包含路由和ajax功能，使用vuex, vue-router 
指令（dom）和组件（视图，数据，逻辑）处理清晰 
性能好，容易优化 
基于依赖追踪的观察系统，并且异步队列更新 
独立触发 
v-model 实时渲染
适用于：模板和渲染函数的弹性选择 
简单的语法及项目搭建 
更快的渲染速度和更小的体积
react 
利用jsx创建虚拟dom 
是一种在内存中描述dom数状态的数据结构 
函数式的方法描述视图 
使用虚拟dom作为模板 
程序片段 
不好控制dom 
生命周期 
服务端渲染：react的虚拟dom的生成可以在任何支持js的环境生成的，所以可以在node环境生成，直接转为string,然后插入到html文件中输出浏览器便可 
适用于：大型应用和更好的可测试性；同时适用于web端和原生app;更大的生态圈
优点
React伟大之处就在于，提出了Virtual Dom这种新颖的思路，并且这种思路衍生出了React Native，有可能会统一Web/Native开发。在性能方面，由于运用了Virtual Dom技术，Reactjs只在调用setState的时候会更新dom，而且还是先更新Virtual Dom，然后和实际Dom比较，最后再更新实际Dom。这个过程比起Angularjs的bind方式来说，一是更新dom的次数少，二是更新dom的内容少，速度肯定快 
ReactJS更关注UI的组件化，和数据的单向更新，提出了FLUX架构的新概念，现在React可以直接用Js ES6语法了，然后通过webpack编译成浏览器兼容的ES5，开发效率上有些优势. 
React Native生成的App不是运行在WebView上，而是系统原生的UI，React通过jsx生成系统原生的UI，iOS和Android的React UI组件还是比较相似的，大量代码可以复用 
维护UI的状态,Angular 里面使用的是 $scope，在 React 里面使用的是 this.setState。 而 React 的好处在于，它更简单直观。所有的状态改变都只有唯一一个入口 this.setState()，
同构的JavaScript 
单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React对此有了解决方案。 
React可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。 
因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。 
缺点
React是目标是UI组件，通常可以和其它框架组合使用，目前并不适合单独做一个完整的框架。React 即使配上 redux 的组合，也不能称之一个完整的框架，比如你想用Promise化的AJAX？对不起没有，自己找现成的库去。而且第三方组件远远不如Angular多。目前在大的稳定的项目上采用React的，我也就只知道有Yahoo的Email。React本身只是一个V而已，所以如果是大型项目想要一套完整的框架的话，也许还需要引入Redux和route相关的东西。
vue,react 共性： 
虚拟dom实现快速渲染 
轻量级响应式组件 
服务端渲染易于集成路由工具，打包工具及状态管理工具

9.知道什么是vuex吗？

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。

核心概念1: State

state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

核心概念2: Getters

我将getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

核心概念3: Mutations

我将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.

核心概念4: Actions

actions 类似于 mutations，不同在于：actions提交的是mutations而不是直接变更状态actions中可以包含异步操作, mutations中绝对不允许出现异步actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象

10.Vue-自定义指令

v-model,v-on,v-bind这一类的指令很经常使用，但有时候也不能满足我们的需求，比如我们想要通过v-focus(这个指令是vue不提供的)实现表单的焦点获取，就会遇到无指令提供的窘况。

这个时候我们可以自定义指令，有个地方要注意下，如果使用了未定义的指令，vue会提出警告，程序依然会正常运行。

1、比如定义一个全局可用的focus实现input选中，全局的东西如JS中的全局变量，一般不会用。

 

 

2、定义局部指令，局部指令只在组件内部有效，超出组件范围则无效，类似局部变量的作用。

 

vue给自定义指令提供了几个函数钩子，用于实现自定义指令的功能：

bind