说一下vue的双向绑定原理

说一下vue的双向绑定原理

比如说，当在输入框输入文字时，vue会检测到数据的变化，然后更新对应的视图。同样，如果你通过代码修改了数据，那么vue也会自动更新视图，其原理是通过数据劫持和发布订阅模式实现的。首先，vue通过object.defineProperty（）方法对数据进行劫持，监听数据的变化，并通过getter和setter方法对数据进行读写。其次，vue通过发布订阅模式，维护了一个订阅者数组，当数据发生变化时，vue会通知所有订阅者进行更新。
因此，当用户在页面上进行修改时，vue会更新对应的数据，并通知所有订阅者更新视图，同时当数据发生变化时，vue也会更新对应的视图，通过这样的机制，vue实现了双向数据绑定，使得数据和视图的可以相互影响
补充：订阅者是vue中的一个概念，它是一个用于管理更新视图的对象，当数据发生变化时，vue会通知所有订阅者进行更新，在vue中，每一个挂载到视图上的组件，或者每一个watcher,都可以被看成一个订阅者，他们订阅了某一个数据的变化，并等待数据发生变化时进行更新，订阅者是vue实现双向数据绑定的关键组成部分，管理着数据和视图之间的关系，保证了数据的变化能够及时反映到视图上

浏览器渲染机制

1.解析html生成DOM树

2.解析css生成cssDOM树

3.合并DOM树和css规则树，生成render渲染树（渲染树只会包括需要显示的节点，和这些节点的样式信息，如果某个节点是display：none，则该节点不会构建到渲染树中）

4.根据render渲染树布局与绘制（即“回流”与“重绘”）

回流：相当于刷新页面的操作

重绘：当元素的属性发生改变，但是却不影响布局的时候，