简述Vue原理

监听器Observer：对数据对象进行遍历， 包括子属性的对象， 利用Object.defineProperty() 对属性都加上setter和getter。这样，给这个对象的某个值赋值，就会出发setter，那么酒能监听到数据的变化了。

解析器Compile ：解析Vue模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者， 一旦数据有变动，等候收到通知，调用更新函数进行数据更新。

订阅者Watcher：Watcher订阅者是Observer和Compile之间的通信桥梁，主要的任务就是订阅Observer中的属性值的变化的消息，当收到属性值变化的消息时，触发解析器Compile中对应的更新函数。

订阅器Dep：订阅器采用发布-订阅设计模式，用来收集订阅者Watcher，对监听器Observer和订阅者Watcher进行同意管理。

简述Vue的双向绑定原理

首先是观察者，Observer他利用obj.defineproperty去拿到data依赖，然后遍历子集依赖，set拿到所有子依赖，就告诉订阅者warcher，每收集一个子依赖就new一个订阅者，最后订阅者被收集起来，dep就是个收集器，是个集合或者数组。然后通过编译器compile去拿组件里所有我们定义的temeplate dom, 这里需要区分nodetype，因为vue 的模板或者是指令都是自己定义好的，如v-text双大括号这些，然后和dep里的收集做一个匹配，render到我们indec.html定义的app里去。
总结一下就是收集数据依赖，然后装到订阅器里，匹配dom中的指令，进行赋值。
这是双向绑定，然后每次修改数据呢？会有一个dom diff的过程。当我们第一次渲染dom的时候，会把dom转成一个vdom对象，是个js对象。当修改数据的时候，会走vue的update钩子，首先通过拿到修改后的数据依赖，生成一份新的vdom对象，和旧的vdom比较，比较是一个逐层比较的过程，走patch方法，相同不管，不同直接新生成一个，把旧的移除，把新的放进去。然后去比较下一层，会有一个update children的过程。children可能会是多个，所以我们给每个孩子定义索引，新旧比较，相同不管，不同新的孩子插入到旧孩子前一个索引下标处，旧孩子移除。前面比较的同时后面也开始比较，一直到startindex大于等于endindex表示比较完了。
然后我们就知道哪里变了，只把变了的vdom render成真正的dom就可以了。
为什么要搞这么复杂呢？原来jq时代也没看出啥问题啊，非说影响效率了。
浏览器渲染呢，先从定义的doctype知道浏览器用哪种格式编译文档，然后把我们写的html语义化标签编译成一个dom树 然后再拿到css组成样式树，这样就可以计算一些宽高，距离，定义一些颜色，最后由上到下渲染我们的html内容。所以老说少用table iframe由于之前jq最爱操作dom，每次js操作dom都会有一个连桥的过程，会影响性能，每次操作dom都需要访问dom又影响性能，dom改变了浏览器直接回流，就是页面再从body从上到下render一遍，如果修改一些宽高样式，还会完成页面重绘，所以就要搞虚拟dom了呗。