var obj = { test1 : function (){ window.setTimeout(function (){ console.info(this) }, 100) }, test2 : function (){ window.setTimeout(() => { console.info(this) }, 100) } } obj.test1() // => Window obj.test2() // => obj
用普通函数还是箭头函数并非绝对，箭头函数也不能完全替代普通函数，要用哪个由具体逻辑决定，前提是要先了解他们的区别。
箭头函数还有一个特点就是能够简化return的书写。
var a = function (n){ return n } var b = (n) => n //可以省略return和花括号 var c = n => n //如果只有一个参数，中括号也可以省略 a(1) // => 1 b(1) // => 1 c(1) // => 1
从这几个简单的例子可以看出，es6不仅仅是新增了几颗糖，对之前js的一些不友好的地方的改善才是重点。
Vue
进入正题，
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
— 文中关于vue的大部分内容引用自vue的官方文档，感谢作者的工作！
响应的数据绑定：
<div> <p>{{ message }}</p> <input v-model="message"> </div> new Vue({ el : '#app', data : { message : 'Hello Vue.js!' } })
结果：改变输入框的值，<p>标签的文本也会对应改变。
基本工作原理：<input>输入框的值与vue实例的message属性进行了绑定，<p>标签的文本也与message属性进行了绑定。输入框值的变化会改变message的值，message值的变化会反应到<p>标签的文本上。
Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。
组件系统：
组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：
实际上，一个典型的用 Vue.js 构建的大型应用将形成一个组件树。
你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是 Web 组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，有几个关键的不同：
Web 组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue.js 组件也可以放在原生自定义元素之内。
Vue.js 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。
组件系统是用 Vue.js 构建大型应用的基础。另外，Vue.js 生态系统也提供了高级工具与多种支持库，它们和 Vue.js 一起构成了一个更加“框架”性的系统。
这里简单介绍下vue最常用也较重要的两块：响应式原理和组件系统。
响应式原理：
Vue.js的数据观测实现原理和Angular有着本质的不同。了解Angular的读者可能知道，Angular的数据观测采用的是脏检查（dirty checking）机制。每一个指令都会有一个对应的用来观测数据的对象，叫做watcher；一个作用域中会有很多个watcher。每当界面需要更新时，Angular会遍历当前作用域里的所有watcher，对它们一一求值，然后和之前保存的旧值进行比较。如果求值的结果变化了，就触发对应的更新，这个过程叫做digest cycle。
脏检查有两个问题：