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

MVVM可以理解为：model-view-viewModel

• Model：数据模型层，数据和业务逻辑都在Model层中定义；

• View：UI视图，负责数据展示；

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

2、vue实现数据双向绑定的原理？

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，订阅者会触发它的update方法，对视图进行更新。从而实现数据的双向绑定。

3、vue的生命周期钩子是什么？

Vue继承了Angular双向数据绑定的优点和react组件化的特点。在 vue中，每个组件都是独立的，都有属于自己的生命周期。
即在new一个对象实例的过程中，我们可以在不同的阶段做各种各样的事情。例如：创建、数据初始化、挂载、更新、销毁。这就是一个完整的组件生命周期，生命周期钩子=生命周期函数=生命周期事件：

    beforeCreate：new了一个空的vue实例，暂未初始化data、methods；
    created：完成data、methods的初始化；
    beforeMount：生成模板，并将data数据和方法挂载到虚拟的Dom树上。
    mounted：通过虚拟模板和虚拟DOM渲染真实DOM树。

    (
        beforeUpdate：数据被更新到虚拟DOM上，在实际页面中找哪位反应出来；
        updated：通过虚拟DOM重新渲染真实DOM树，可进行DOM操作；
    )// 更新阶段不必须（可为0至多次）

    beforeDestroy：清楚事件监听、子组件、watcher等，但是还是可以实现完整的功能；
    destroyed：组件已经销毁。

生命周期事件

4、Vue 有哪些常见的指令？

v-html、v-show、v-if、v-for、v-model、v-on、v-once等等。

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

• v-show：仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；
• v-if：会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，即初始化时如果v-if为false，那么将不用编译该节点；
  优缺点对照：如果需要显示和隐藏来回切花，那么使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

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

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

7、手写promise获取一张图片

1、Promise产生的原因

常见的回调地狱场景：
// 回调地狱  callback hell
// 获取第一份数据
$.get(url1, (data1) => {
    console.log(data1)
    //获取第二份数据
    $.get(url2, (data2) => {
        console.log(data2)
        //获取第三份数据
        $.get(url3, (data3) => {
            console.log(data3)
            //...
        })
    })
})

如上所示，多异步容易出现以下问题：

• 多异步返回的执行顺序不可控。
• 多异步的异常错误处理非常繁杂。
• 多异步嵌套，会导致回调地狱。

我们急需要一个能够保证异步执行顺序，保证执行和抛出错误的异步处理的保证范式来解决这些问题。ES6用 promise处理同样的多异步问题：

function getData(url) {
            return new Promise((resolve, reject) => {
        $.ajax({
            url,
            success(data) {
                resolve(data)
            },
            error(err) {
                reject(data)
            }
        })
    })
}
var url1 = '/datà1.json'
var url2 = '/datà2.json'
var url3 = '/datà3.json'
getData(url1).then(data1 => {
    console.log(data1)
    return getData(url2)
}).then(data2 => {
    console.log(data2)
    return getData(url3)
}).then(data3 => {
    console.log(data3)
}).catch(err => {
    console.log(err)
})

2、Promise加载一张图片

function loadImg(src2) {
    return new Promise(
        //参数 resolve reject 均是函数
        (resolve,reject)=>{
            const img1 = document.createElement('image')
            img1.src = src2
            img1.onload=()=>{
                resolve(img1)
            }
            img1.onerror=()=>{
                const err = new Error(`图片加载失败！${src}`)
                reject(err)
            }
            
        }
    )
}
const url1 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
const url2 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
loadImg(url1).then(img1=>{
    console.log(img1.width)
    return img1 //返回resolve中的参数
}).then(img1=>{
    console.log(img1.height)
    return loadImg(url2) //返回promise实例
}).then(img2=>{则下一个then的数据就是该promise实例的resolve中的参数
    console.log(img2.width)
    return img2
}).then(img2=>{
    console.log(img2.height)
})
.catch(err=>{
    console.log(err)
})

其他前端面试问题：

1、前端如何优化网站性能？

1、减少 HTTP 请求数量
在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

2、CSS Sprites（精灵图）
这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

3、合并 CSS 和 JS 文件
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

4、采用 lazyLoad
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

5、控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。
一般情况下都是CSS在头部，JS在底部。

6、利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

7、减少重排（Reflow）
基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。
减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。

8、减少 DOM 操作

9、图标使用 IconFont 替换

2、 页面渲染过程？

• 输入网址；

• 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；

• 与web服务器建立TCP连接；

• 浏览器向web服务器发送http请求；

• web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；

• 浏览器下载web服务器返回的数据及解析html源文件；

• 生成DOM树，解析css和js，渲染页面，直至显示完成；

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

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

原生DOM对象转jQuery对象：

• var box = document.getElementById('box');
• var (box);

jQuery对象转原生DOM对象：

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

4、jQuery如何扩展自定义方法

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