前端面试题（3）

我这面试题是 复制垃圾粉丝阚冬梅的 自己写的。

导航

1、对MVC、MVVM、MVP的理解

MVC 是后台程序的一种思想（设计模式）将程序分为三部分
然后使得程序各司其职，提高开发效率，便于维护
model 数据模型 （向数据库读写数据）
view 视图界面（广义的界面 html js css image）
controller 控制器 来协调什么时候显示视图 什么时候调用model

MVVM 是前台程序的一种设计模式，是针对于MVC中V进行的更细致的分工 分成三部分 M (model) 数据、 V (view) 视图、 VM（view-model）逻辑用来协调model和view的

MVP 模式是将controller改名为presenter，同时改变了通信方向
各部门之间的通信都是双向的，View和Model不发生联系，都通过presenter来进行传递

果然是垃圾，这么多字跟面试官背书呢！

2、v-show VS v-if

在条件为真的情况下v-if和v-show是一样的都会显示数据，在条件为假的情况下v-if不显示数据而v-show显示数据但用display:none隐藏了
v-if有更高的切换成本，v-show有更高的渲染成本，频繁的切换要用v-show

这个更垃圾，垃圾的就像要命辉的武力值，大黄的样式，一坨尹的脂肪和表妹的眼光，垃圾的要死

3、组件通信

父传子

父组件：
1、在父组件的标签上绑定一个自定义的属性（属性名叫什么没有关系）来挂载要传输的变量
子组件：
2、在子组件中添加props属性（props是一个数组）,来接收父组件中传输的数据（父组件中自定义的属性）
3、接收的数据直接使用就行

子传父

在子组件中通过this.$emit(‘自定义事件名称’, ‘要传递的数据’)，完成子组件配置
在子组件的组件标签上通过@自定义事件名称=“事件处理函数”，来完成父组件接收的任务

兄弟传参

1、（前提是有共同的父组件）先子传父 再父传子
2、 中央通信 （ 目前中央通信是解决组件通信的最佳方法）
无需关注组件嵌套层级，也无需关注组件关系
$emit - 完成发布
$on - 监听订阅

这个嘛很好理解，爱骑小摩托的人都会。

4、生命周期（keep-alive）

生命周期共有三个阶段：分别是创建阶段、运行阶段、销毁阶段

创建阶段（肯定会被执行一次）

beforeCreate() 在这个钩子函数执行的时候，只有一些实例默认的事件和生命周期函数，要注意的是在这个钩子函数执行的时候 咱们data和methods中的数据是不能使用的
created()在这个钩子函数中，data和methods中数据已经能被使用了，所以created()是最高开始使用data和methods中数据的生命周期函数了
beforeMount()这个生命周期函数，内存中是新生成的模板但是页面还是旧的 还没有渲染出来
Mounted()这个时候模板已经渲染完成，内存和页面已经同步起来了，这个方法是最早操作dom元素的生命周期

运行阶段（根据数据的变化会执行0次或者多次）

beforeUpdate() 这是生命周期执行的时候根据最新的数据已经在内存中生成最新的模板，但是页面还是旧的
Updated()页面和内存都是最新的

销毁阶段（肯定会被执行一次）

beforeDestroy 销毁之前 在这个钩子中 实例上所有的东西还是能用的 主要做一些清楚定时器 释放变量的一系列操作
Destroyed 已经销毁完成 所有的东西都已经不能用

keep-alive是动态组件

keep-alive 是vue提供给我们的一个标签，来保存不被激活的组件实例，而不是销毁它们

keep-alive可以缓存状态，我用 keep-alive包住我的身体，当我已经变老时，涛哥已经没了。

5、computed 和 watch的区别

computed:计算属性，具有缓存性
给原始的属性添加逻辑计算（就是简化tempalte里面{{}}计算）依赖于原始属性值，如果原始属性的值不发生改变，就不会重新执行

watch:侦听器，监听属性，没有缓存性
通过props route 来执行异步操作，只要监听的对象发生改变，就会立即执行

这道题全世界最笨的人都会，是吧？看懂没？

6、常见的解决跨域的方式

这道题有点厉害哦，具有领导气派的鼎哥（化名）已经详细的给我们在黑板上画了三块砖，并绘声绘色地讲了出来，但是我还是不太懂，可能他讲课的时候我在睡觉吧。

这个大家可以通过这个链接找到答案，虽然作者没有经过专业的培训，天天说自己啥都不会（过分谦虚可能就是在装逼），我信了，我信个四哥嘴。

通往知识海洋的桥梁：https://www.kancloud.cn/small-four/asdasdasdasd/1012394

拓展知识：JSONP

实现原理：
script标签不受到浏览器和同源策略的影响，允许跨域引用资源，因此可以通过动态创建script标签，然后利用src属性进行跨域

实现方式：
动态创建script标签，通过回调函数处理请求结果

jsonp的优点:
（1）可以跨域
（2）兼容性好

jsonp的缺点：

（1）只能支持GET请求，调用失败时不会返回状态码
（2）安全性，如果提供jsonp的服务被人控制，那么所有调用这个jsonp的网站都存在漏洞

json放了个屁，叫JSONP，涛哥放了个屁，叫救命。