相关推荐：阮一峰《ECMAScript6》、npm入门文档
1. Vue.js 核心思想
Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。
数据驱动：
Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。
watcher：每一个指令都会有一个对应的用来观测数据的对象，叫做watcher，比如v-text="msg", {{ msg }}，即为两个watcher，watcher对象中包含了待渲染的关联DOM元素。
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
基于依赖收集的观测机制原理： 1、将原生的数据改造成 “可观察对象”，通常为，调用defineProperty改变data对象中数据为存储器属性。一个可观察对象可以被取值getter，也可以被赋值setter。2、 在解析模板，也就是在watcher的求值过程中，每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。3、 当一个被依赖的可观察对象被赋值时，它会通知notify所有订阅自己的watcher重新求值，并触发相应的更新，即watcher对象中关联的DOM改变渲染。依赖收集的优点在于可以精确、主动地追踪数据的变化，不需要手动触发或对作用域中所有watcher都求值（angular脏检查实现方式的缺点）。特殊的是，对于数组，需要通过包裹数组的可变方法（比如push）来监听数组的变化。在添加/删除属性，或是修改数组特定位置元素时，也需要调用特定的函数，如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。
组件系统：
注册一个组件：
Vue.component('my-component', {
// 模板
template: '<div>{{msg}} {{privateMsg}}</div>',
// 接受参数
props: {
msg: String
},
// 私有数据，需要在函数中返回以避免多个实例共享一个对象
data: function () {
return {
privateMsg: 'component!'
}
}
})
<my-component msg="hello"></my-component>
组件的核心选项
1、 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。 2、 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。 3、 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。 4、 方法（methods）：对数据的改动操作一般都在组件的方法内进行。 5、 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。 6、 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。Webpack是一个开源的前端模块构建工具，它提供了强大的loader API来定义对不同文件格式的预处理逻辑，这是.vue后缀单文件组件形式的基础。所以在此基础上，尤大开发的vue-loader允许将模板、样式、逻辑三要素整合在同一个文件中，以.vue文件后缀形成单文件组件格式，方便项目架构和开发引用。
其他特性： 1、 异步批量DOM更新：当大量数据变动时，所有受到影响的watcher会被推送到一个队列中，并且每个watcher只会推进队列一次。这个队列会在进程的下一个 tick异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作，也可以保证所有的DOM写操作在一起执行，避免DOM读写切换可能导致的layout。2 动画系统：Vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的CSS Transition或Animation效果，还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。3 可扩展性：除了自定义指令、过滤器和组件，Vue.js还提供了灵活的mixin机制，让用户可以在多个组件中复用共同的特性。
2、数据双向绑定原理
实现数据绑定的常见做法：
① Object.defineProperty：劫持各个属性的setter，getter
② 脏值检测：通过特定事件进行轮循
③ 发布/订阅模式：通过消息发布并将消息进行订阅
vue采用的是数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来实现对属性的劫持，并在数据变动时发布消息给订阅者，使其触发相应的监听回调。
具体步骤：
① 实现Observer
将需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter。实现一个消息订阅器，维护一个数组，用来收集订阅者，数据变动触发notify，再调用订阅者的update方法
② 实现Compile
compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
③ 实现Watcher
Watcher订阅者是Observer和Compile之间通信的桥梁
主要做的事情是:
在自身实例化时往属性订阅器(dep)里面添加自己
自身必须有一个update()方法
待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
④ 实现MVVM
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果 参考：剖析Vue原理&实现双向绑定MVVM 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
3、对Vue.js的template编译的理解
template会被编译成AST语法树，AST会经过generate得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点
parse 过程，将 template 利用正则转化成 AST 抽象语法树。 optimize 过程，标记静态节点，后 diff 过程跳过静态节点，提升性能。 generate 过程，生成 render 字符串
司徒大佬有一篇很好的文章：前端模板的原理与实现
4、组件data为什么必须是函数？
因为组件可能被多处使用，但它们的data是私有的，所以每个组件都要return一个新的data对象，如果共享data，修改其中一个会影响其他组件
