Vue.js 核心：采用简洁的模板语法 来声明式的将数据渲染进 DOM。
<div id="app">
{{ msg }}
</div>
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js!'
}
})
数据驱动
MVVM 模型，数据双向绑定
模型层(model)只是普通 JavaScript 对象，修改它则更新视图(view)，状态管理变得简单直观。
把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。（Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，支持IE9+）
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
- 不允许动态添加根级响应式属性：在初始化实例前声明根级响应式属性
- 异步执行 DOM 更新：观察到数据变化 将开启一个队列，缓冲同一事件循环中的所有改变
组件化
父子组件解耦 props down, events up
- 父组件通过 props 向下传递数据给子组件
- 子组件通过 events 给父组件发送消息
<template>
<p>{{ greeting }} World!</p>
</template>
<script>
module.exports = {
data: function () {
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
├── router
│ ├── index.js
│ └── ...
└── store
├── index.js # 组装模块并导出 store
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
Vuex
多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态
- 传参的方法对于多层嵌套的组件将会非常繁琐
- 对于兄弟组件间的状态传递无能为力
- 来自不同视图的行为需要变更同一状态
- 父子组件直接引用
- 通过事件来变更和同步状态的多份拷贝
- state，驱动应用的数据源
- view，以声明方式将state映射到视图
- actions，响应在view上的用户输入导致的状态变化
Vue-Router
- hash 模式
- history 模式
将路由对应的组件定义成异步组件，实现路由懒加载。
