面试题集合

面试题集合

1. CSS引入的方式有哪些? link和@import的区别是?

有 4 种方式可以在 HTML 中引入 CSS。

1.内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：

<div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个<div>拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

2.嵌入方式

嵌入方式指的是在 HTML 头部中的

<head>
    <style>
    .content {
        background: red;
    }
    </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

3.链接方式

链接方式指的是使用 HTML 头部的标签引入外部的 CSS 文件。

示例：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

4.导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

<style>
    @import url(style.css);
</style>

两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

2.简述css盒模型

CSS盒模型是由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成的。

1、W3C标准模型

width = 内容宽度

整个盒模型的宽是： margin*2 + border*2 + padding*2 + width
（严格来说是：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right）

整个盒子模型的高是： margin*2 + border*2 + padding*2 + height
（严格来说是：margin-left + border-left + padding-left + height + padding-right + border-right + margin-right）

通过box-sizing:content-box设置标准模型
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin )

2、IE盒模型：

width = 内容宽度+内边距的宽度+边框线的宽度

整个盒子模型的宽是： margin*2 + width
（严格来说是：margin-left + width + margin-right）

整个盒子模型的高是： margin*2 + height
（严格来说是：margin-left + height + margin-right）

通过box-sizing:border-box设置IE盒模型
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

3.简述px、em、rem以及其区别

px特点：

1、IE无法调整px作为单位的字体大小；

2、Firefox能够调整px、em和rem。

px是像素，是相对长度单位，是相对于显示器屏幕分辨率而言的。

em特点：

1、em的值并不是固定的；

2、em会继承父级元素的字体大小。

em也是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em=16px。那么12px=0.75em，10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为16px*62.5%=10px，这样12px=1.2em，10px=1em，换算就会简单多了。

这里我们在写CSS的时候要注意：

1、body选择器中声明font-size=62.5%；

2、将原来的px数值除以10，然后换上em作为单位；

3、重新计算那些被放大的字体的em数值，避免字体大小的重复声明。也就是避免1.2*1.2=1.44的现象。比如说在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em，因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem特点：

rem是CSS3新增的一个相对单位（root em，根em）。

与em的区别：使用rem为元素设定字体大小时，仍然是相对大小，但相对的是HTML根元素。这个单位集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是px和rem一起使用，用px来实现IE6-8下的效果，然后使用rem来实现现代浏览器的效果。

4. javascript的typeof返回哪些数据类型

返回数据类型

　　undefined

　　string

　　boolean

　　number

　　symbol(ES6)

　　Object

　　Function
　　
关于symbol

5. 列举强制类型转换和隐式类型转换

强制类型转换

Number(参数)把任何类型转换成数值类型

parseInt（参数1，参数2）将字符串转换成整数

parseFloat()将字符串转换成浮点数字

string(参数)：可以将任何类型转换成字符串

Boolean()可以将任何类型的值转换成布尔值

隐式类型转换

（1）.四则运算

　　　　加法运算符+是双目运算符，只要其中一个是string类型，表达式的值便是一个String。

　　　　对于其他的四则运算，只有其中一个是Number类型，表达式的便是一个Number。

　　　　对于非法字符的情况通常会返回NaN:’1’*’a’ // => NaN,这是因为parseInt(a)值为NaN，1*NaN还是NaN

（2）.判断语句

　　　　判断语句中的判断条件需要是 Boolean类型，所以条件表达式会被隐式转换为Boolean。其转换规则则同Boolean的构造函数。比如:

　var obj = {};
　if(obj){
　　　while(obj);
　}

（3）.Native代码调用

　　　　JavaScript宿主环境都会提供大量的对象，它们往往不少通过JavaScript来实现的。JavaScript给这些函数传入的参数也会进行隐式转换。例如BOM提供的alert方法接受String类型的参数：alert({a:1}); //=>[object Object]

6. 简述null 与undefined的区别

我们先来看 null 和 undefined 的相同之处：

二者在转为布尔值时均为 false

if (!null) { console.log('null is converted to false!');}
if (!undefined) { console.log('undefined is converted to false!);}

二者在不严格相等的情况下是等价的

console.log(null == undefined); // 结果为true

再来比较一下区别：

二者类型不一致；

console.log(typeof null);   // 结果为 Object
console.log(typeof undefined);  // 结果为 undefined，undefined为undefined类型的唯一一个值

转为数值时结果不同；

null + 5;  // 结果为 5
undefined + 5; // 结果为NaN

null 是一个表示 “无” 的对象，转为数值时为 0；
undefined 是一个表示 “无”的原始值，转为数值时为 NaN。

典型用法不一致

null 表示”没有对象”，即该处不应该有值。典型用法是：
(1) 作为函数的参数，表示该函数的参数不是对象。
(2) 作为对象原型链的终点。

undefined 表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：
(1) 变量被声明了，但没有赋值时，就等于undefined。
(2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
(3) 对象没有赋值的属性，该属性的值为undefined。
(4) 函数没有返回值时，默认返回undefined。

7. 简述sessionStorage、localStorage和cookie的区别

共同点：都是保存在浏览器端、且同源的
区别：
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
6、web Storage的api接口使用更方便

扩展

一、Cookie、session和localStorage的区别

cookie的内容主要包括：名字、值、过期时间、路径和域。
路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。

会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie，不同的浏览器有不同的处理方式session机制。

当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含session id，则为客户端创建一个session并且生成一个与此session相关联的session id，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应中返回给客户端保存。保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。

二、cookie和session的区别：

*1、cookie数据存放在客户的浏览器上，session数据放在服务器上
2、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑*到安全应当使用session
3、session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
4、单个cookie保存的数*据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie
5、建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中
6、session保存在服务器，客户端不知道其中的信心；cookie保存在客户端，服务器能够知道其中的信息
7、session中保存的是对象，cookie中保存的是字符串
8、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的*

三、web Storage和Cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的，cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可跨域调用。
除此之外，web storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是cookie也是不可或缺的，cookie的作用是与服务器进行交互，作为http规范的一部分而存在的，而web Storage仅仅是为了在本地“存储”数据而生
sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage是在同源的同窗口中，始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后，sessionStorage就会被销毁，同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的

Web Storage带来的好处：

1、减少网络流量：一旦数据保存在本地之后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要的来回传递

2、快速显示数据：性能好，从本地读数据比通过网络从服务器上获得数据快得多，本地数据可以及时获得，再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示

3、临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便

四、浏览器本地存储与服务器端存储的区别

其实数据既可以在浏览器本地存储，也可以在服务器端存储
浏览器可以保存一些数据，需要的时候直接从本地存取，sessionStorage、localStorage和cookie都是由浏览器存储在本地的数据
服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。
1、服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端
2、服务器端也可以保存用户的临时会话数据，服务器端的session机制，如jsp的session对象，数据保存在服务器上，

实际上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象，会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期

服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分别保存在用户各自的浏览器中，浏览器端一般只用来存储小数据，而非服务可以存储大数据或小数据服务器存储数据安全一些，浏览器只适合存储一般数据

五、sessionStorage与页面js数据对象的区别

页面中一般的js对象的生存期仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了
而sessionStorage只要同源的同窗口中，刷新页面或进入同源的不同页面，数据始终存在，也就是说只要浏览器不关闭，数据仍然存在

8. eval 是做什么的

eval()的作用

把字符串参数解析成JS代码并运行，并返回执行的结果；

例如：

eval("2+3");//执行加运算，并返回运算值。
eval("varage=10");//声明一个age变量

eval的作用域

functiona(){
 eval("var x=1"); //等效于 var x=1;
 console.log(x); //输出1
}
a();
console.log(x);//错误 x没有定义

说明作用域在它所有的范围内容有效

示例2：

functiona(){
 window.eval("var x=1"); // 等效于window.x=1;定义了全局变量
 console.log(x); //输出1
}
a();
console.log(x);//输出1

这段代码悲剧了？在IE8及IE8一下的版本就不支持了。

解决方法：

functiona(){
 if(window.execScript){ // 支持IE8及以下的版本
  window.execScript("var x=1");
 }
 else{ //常用的浏览器都支持
  window.eval("var x=1");
 }
 console.log(x);
}
a();
console.log(x);

注意事项

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

其它作用

由JSON字符串转换为JSON对象的时候可以用eval，例如：

varjson="{name:'Mr.CAO',age:30}";
varjsonObj=eval("("+json+")");
console.log(jsonObj);

9. 简述同步和异步以及其区别

举个例子：普通B/S模式（同步）AJAX技术（异步）

同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事 同步是阻塞模式

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕 异步是非阻塞模式

10. 简述new操作符

function Animate(name){
      this.name = name;
}
Animate.prototype.dance = function(){
      console.log(this.name + "在跳舞！");
}
var dog = new Animate('小白');
dog.dance();
 //new Animate('小白')时发生的事情：
        1.创建了一个新对象 var obj = {}
        2.将Animate中的this关键字指向obj
        3.将Animate的prototype原型指向obj原型,这样obj就拥有了Animate中的方法
        4.执行Animate构造函数（类)的代码
        执行完后,obj的样子:
        var obj = {
            name : '小白',
            dance : function(){
                console.log(this.name + "在跳舞！");
            }
        }

当new 一个函数时,先创建一个{}对象，该对象的constructor为new 关键字后的函数,prototype为Object{}(js中Object为所有对象的父类，

将生成对象的 prototype设为Object{}就达到了这种效果，也可显式设置prototype,)之后执行constructor的代码，若代码中的有this，那么这个this代表{}，所以constructor中的this.属性|方法会在{}中生成。

对于其它的方式生成的对象

在我们定义一个函数时js会生成一个{}对象，constructor为Function（）{[nateiv code]},通过该方法对该函数对象进行初始化（使用本地代码）prototype为一个匿名函数（该匿名函数有指向Object的原型），使得该函数通过原型连接到Object对象上构成原型链
参考链接

11. js中原生ajax 有几种状态值？常用状态码分别多少

原生Ajax的代码实现：参考链接

1：主要分四个步骤：
1) 定义XMLHttpRequest对象
2) 与服务器建立连接
3) 发送请求
4) 接受来自服务器的信息并处理

Ajax的 readyState状态值与 status状态码区别

readyState，是指运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤，使用“ajax.readyState”获得

status，是指无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，使用“ajax.status”获得

总体理解：可以简单的理解为state代表一个整体的状态。而status是这个大的state下面具体的小的状态。

Ajax的 readyState状态值

readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义

0：初始化，XMLHttpRequest对象还没有完成初始化
1：载入，XMLHttpRequest对象开始发送请求
2：载入完成，XMLHttpRequest对象的请求发送完成
3：解析，XMLHttpRequest对象开始读取服务器的响应
4：完成，XMLHttpRequest对象读取服务器响应结束

Ajax的 status状态码

status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码
在HTTP1.1协议下，HTTP状态码总共可分为5大类

1xx：信息响应类，表示接收到请求并且继续处理
2xx：处理成功响应类，表示动作被成功接收、理解和接受
3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
5xx：服务端错误，服务器不能正确执行一个正确的请求

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

12. jsonp原理同时支持 get 和post 请求么？为什么不是真正的ajax

jsonp只支持get请求，ajax支持get和post请求。

ajax是通过XMLHttpRequest来进行的，而jsonp 只是通过加载javascript脚本实现
进行调试，查看网络请求，按照xhr或者scripts类型过滤后，在xhr（XMLHttpRequest的缩写，也就是所谓的ajax请求）里找不到页面发送的jsonp请求。在scripts里则能找到。因为jsonp就是加载了javascript脚本而已。参考链接

Jsonp优缺点

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

Jsonp原理

动态创建一个script标签，利用script标签src属性访问没有限制，实现跨域。

web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去。

允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据这样客户端就可以随意定制自己的函数来自动处理返回数据

Ajax 和 jsonp的区别

ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
实质不同
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本（后缀.json)
区别联系
不在于是否跨域
ajax通过服务端代理一样跨域
jsonp也不并不排斥同域的数据的获取
jsonp是一种方式或者说非强制性的协议
ajax也不一定非要用json格式来传递数据　
jsonp只支持get请求，ajax支持get和post请求

13. 事件委托是什么？

利用冒泡的原理，把事件加到父级上，触发执行效果。

优点：

提高性能。
新添加的元素还会有之前的事件。

参考链接链接1 链接2

14. 什么是 “use strict”? 使用它的好处和坏处分别是什么？

ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

优点

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

注：经过测试 IE6,7,8,9 均不支持严格模式。

缺点：

现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。
更多了解

若使用过 ng, vue等js,数据双向绑定及虚拟Dom的理解

15. vue数据双向绑定原理

参考链接1 、参考链接2
vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们就可以在get或者set方法里假如其他的触发函数，达到监听数据变动的目的。

16. vue虚拟Dom的理解

简单来说，虚拟DOM是用Object来代表一颗节点，这个Object叫做VNode，然后使用两个VNode进行对比，根据对比后的结果修改真实DOM。

为什么是两个VNode？因为每次渲染都会生成一个新的VNode，然后和上一次渲染时用的VNode进行对比。然后将这一次新生成的VNode缓存，用来进行下一次对比。

具体如何diff，参考1

三大框架对比

一、Vue.js：

其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。

Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。

Vue.js的特性如下：

　　 1.轻量级的框架

　　 2.双向数据绑定

　　 3.指令

　　 4.插件化

优点：

简单：官方文档很清晰，比 Angular 简单易学。
快速：异步批处理方式更新 DOM。
组合：用解耦的、可复用的组件组合你的应用程序。
紧凑：~18kb min+gzip，且无依赖。
强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点：

新生儿：Vue.js是一个新的项目，没有angular那么成熟。
影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
不支持IE8：

二、angularJS：

angularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

angularJS的特性如下：

　　　　1.良好的应用程序结构