前端面试题集锦

最近要开始找工作了，多一份准备多一份信心，光看的话很快就会忘记，所以我就把从网上摘抄来的文章有重新手打一遍，以加强记忆。

1、谈谈你对MVVM开发模式的理解

MVVM分为Model，View，ViewModel三者，

Model代表数据模型，数据和业务逻辑都在Model层重定义。

View代表视图，负责数据的展示。

ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作。

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系，因此当Model中的数据改变时会触发View层的更新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

2、Vue有哪些指令

v-if    v-show    v-for  v-html

3、v-if和v-show有什么区别

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

4、简述Vue的响应原理

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

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

5、Vue中如何在组件内部实现一个双向数据绑定

假设有一个输入框组件，用户输入时，同步父组件页面中的数据

具体思路：父组件通过 props 传值给子组件，子组件通过$emit来通知父组件修改相应的props值，具体实现如下

6、Vue中如何监控某个属性值得变化

比如现在要监控data中，obj.a的变化，vue中监控对象属性的变化你可以这样：

watch:{
    obj:{
        handler(newValue, oldValue){
            console.log(newValue, oldValue)
        },
        deep: true
    }
}

deep属性表示深层遍历，但是这么写会监控所有属性变化，并不是我们想要的效果，

watch: {
    'obj.a': {
        handler(newName, oldName) {
            console.log('change')
        }
    }
}

还有一种方法，可以通过computed来实现，只需要

computed: {
    a1() {
        return this.obj.a
    }
}

利用计算属性的特性来实现，当依赖改变时，便会重新计算一个新值。

7、Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决

原因在于vue实例创建时，obj.b并未声明，因此就没有被Vue转换成相应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api $set()，此方法相当于手动去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了。

8、delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变，Vue.delete直接删除了数组，改变了数组的键值

9、如何优化SPA应用的首屏加载速度慢的问题

将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度。

在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小app.bundel的体积，在调用某个组件时在加载对应的js文件

加一个首屏loading图，提升用户体验

10、前端如何优化网站性能

减少 HTTP 请求数量

css精灵图片，将多张图片合并成一张图片达到减少HTTP请求的一种解决方案

合并CSS和JS文件，将多个CSS或者JS合并成一个文件

使用懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容

11、网页从输入网址到渲染完成经历了哪些过程

1、输入网址
2、发送到DNS服务器，并获取域名对应的web服务器对应的ip地址
3、与web服务器简历TCP连接
4、浏览器向web服务器发送http请求
5、Web服务器响应请求，并返回指定url的数据
6、浏览器下载Web服务器返回的数据及解析HTML源文件
7、生成dom树，解析css和js，渲染页面，直至显示完成

12、jQuery 获取的dom对象和原生的dom对象有何区别？

js原生获取的dom是一个对象，jquery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。

原生dom对象转jquery对象

var box = document.getElementById('box')
var $box = $(box)

jquery 对象转原生DOM对象

var $box = $('#box')
var box = $box[0]

13、jquery如何扩展自定义方法

(jQuery.fn.myMethod=function(){
    alert('myMethod')
})

$('#div').myMethod()