一、 数据驱动
- 数据响应式、双向绑定、数据驱动
- 数据响应式：
数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，
避免了复杂的 DOM 操作，提高开发效率。
- 双向绑定
数据改变，视图改变；视图改变，数据改变。
我们可以使用 v-model 在表单元素上创建双向数据绑定
- 数据驱动是 Vue 最独特的特性之一
开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图上的。
二、 Vue2.X 响应式原理
- 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue
将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属
性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法
shim（降级）的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
三、 Vue3.X 响应式原理
- 使用 Proxy 监听对象，而非属性，性能比 defineProperty 好。
四、 发布订阅模式
- 我们假设，存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”publish
一个信号，其他任务可以向信号中心“订阅”subscribe 这个信号，从而知道自己什么
时候可以开始执行。这个就叫“发布/订阅模式”publish-subscribe pattern
五、观察者模式
- 观察者 Watcher
- 目标 Dep
- subs 数组：储存所有观察者
- addSub()：添加观察者
- notify()：当事件发生，调用所有观察者的 update()方法
- 没有事件中心
六、虚拟 DOM
- 手动操作 DOM 比较麻烦，还需要考虑浏览器兼容性问题，虽然有 jQuery 等库简化 DOM 操作，
但是随着项目的复杂，DOM 操作复杂提升
- 为了简化 DOM 的复杂操作于是出现了各种 MVVM 框架，MVVM 框架解决了视图和状态的同步问题，
为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，
于是 Virtual DOM 出现了
- Virtual DOM 的好处是当状态改变时不需要立即更新 DOM，只需要创建一个虚拟树来描述 DOM，
Virtual DOM 内部将弄清楚如何有效(diff)的更新 DOM
- 参考 github 上 virtual-dom 的描述:
- 虚拟 DOM 可以维护程序的状态，跟踪上一次的状态
- 通过比较前后两次状态的差异更新真实 DOM
七、虚拟 DOM 的作用
- 维护视图和状态的关系
- 复杂视图情况下提升渲染性能
- 除了渲染 DOM 以外，还可以实现 SSR（Nuxt.js/Next.js），原生应用（Weex/React Native），小程序等