Vue.js 原理简析

• 构建用户界面的渐进式框架
• 核心库 只关注视图层 （实现ViewModel）
• 复杂单页应用 单文件组件 + Vue 生态系统

Vue.js 核心：采用简洁的模板语法 来声明式的将数据渲染进 DOM。

    {{ msg }}

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 给父组件发送消息

├── 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 模式

将路由对应的组件定义成异步组件，实现路由懒加载。