Vue原理

学东西要知其然,知其所以然,我用过AngularJs/Angular,以此对比,便于理解

1、数据绑定

它们都有双向绑定的概念,但是实现的方式是不同的,简要对比一下

1.1 AngularJs(脏值检查)

AngularJs其实就是Angular1,后来Angular2更名未Angular,AngularJs采用的是脏值检查,AngularJs在 scope 模型上设置了一个监听队
列,用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch,用来检测它监视的
model 里是否有变化的东西。当浏览器接收到可以被 AngularJs context 处理的事件时,$digest 循环就会触发,遍历所有的 $watch,最后
$apply应用到dom,从而更新视图

1.2 Angular(脏值检查)

Angular是AngularJs的升级版,Angular中引入了zoneJs,将JavaScript的异步任务都包裹了一层,这些异步任务都将运行在ZoneJs的
content中,这也是为什么Angular选择了拥抱浏览器原生的对象和方法的原因,当ZoneJs钩子被调用的时候,通知Angular,Angular
此时再做相应的脏值检查,更新DOM即可

1.3 Vue(数据劫持)

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时
发布消息给订阅者,触发相应的监听回调