Vue原理浅析^_^

title: Vue
date: 2018-03-29 13:39:09
tags:

Vue2是一个典型的MVVM框架，模型（Model）只是一个普通的javascript对象， 修改它则视图（View）会自动更新，这种设计使得状态管理变得简单而直观。

Vue实现数据绑定的效果，需要三大模块：

1. Observer：能够对数据对象的所有属性进行监听，一旦变动可拿到最新值通知订阅者。
2. Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定响应的更新函数
3. Watcher：订阅者，作为连接Observer和compile的桥梁，能够订阅并且受到每个属性变动的通知，执行指令绑定的响应更新函数，从而更新视图

Observer

Observer的核心是通过Object.defineProperty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变动时，就会触发setter，这时候Oberver就会通知订阅者，订阅者就是Watchter，更新响应的视图。

Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做下面几个事：

1. 在自身实例化时往属性订阅器（dep）里面添加自己
2. 自身必须要有一个update()方法
3. 待属性变动，dep.notice()通知时，能调用自身的update方法，并且触发Compile中绑定的回调

Compile

Compile主要做的事情就是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个节点对应的指令绑定更新函数，添加监听数据的订阅者。