1、如何理解MVVM开发模式？

MVVM分为Model、View、ViewModel三者。
Model 代表数据模型，数据和业务逻辑都在Model层中定义；
View 代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作。
        Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
        这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

2、vue有哪些指令？

v-html，v-model，v-if，v-show，v-for，v-bind等。

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

相同点：v-if与v-show都可以动态的控制DOM元素的显示隐藏。
不同点：v-if显示隐藏是将DOM元素整个添加或者删除，而v-show仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换。
详细区别：
a.实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。
b.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换；
c.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；
d.性能消耗：v-if有更高的切换消耗，不适合做频繁的切换； v-show有更高的初始渲染消耗，适合做频繁的额切换；
e.使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

4、简述vue的响应式原理

        当一个Vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。
        每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

5、delete与vue.delete删除数组的区别

delete只是将别删除的元素变成了empty/undefined，而其他的元素键值还是不变；

var a=[0,1,2,3,];
delete a[1];
console.log(a);     // [0,empty,2,3]

vue.delete直接删除了数组的元素，改变了数组的键值。

var b=[0,1,2,3];
this.$delete(b,1);
console.log(b);    // [0,2,3]

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

• 将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度；
• 在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；
• 加一个首屏 loading 图，提升用户体验。

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

大致可以分为如下7步：
1、输入网址；
2、发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
3、与web服务器建立TCP连接；
4、浏览器向web服务器发送http请求；
5、web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
6、浏览器下载web服务器返回的数据及解析html源文件；
7、生成DOM树，解析css和js，渲染页面，直至显示完成。

8、vue中key值的作用

使用key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

9、Vue 组件中 data 为什么必须是函数？

        在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。
        当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

父组件通过 props 传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值